Hi, I’m trying to have both authentication and subscriptions in a project I’m working on. In my client.ts document, I’m getting two errors.
one stating:
And the other stating:
Argument of type 'HttpLink' is not assignable to parameter of type 'ApolloLink | RequestHandler'.
Type 'HttpLink' is not assignable to type 'ApolloLink'.
Types of property 'split' are incompatible.
Types of parameters 'test' and 'test' are incompatible.
Types of parameters 'op' and 'op' are incompatible.
Property 'toKey' is missing in type
I’m unsure what is causing this as I followed the documents as much as I could based on the information provided. If anyone has any idea of what could be causing these problems I would really appreciate it. Thank you!
Full document
import { ApolloClient, split, createHttpLink, HttpLink, InMemoryCache } from '@apollo/client';
import { getMainDefinition } from '@apollo/client/utilities';
/*import { ApolloLink, concat} from "apollo-link";*/
import { setContext } from 'apollo-link-context'
import AsyncStorage from '@react-native-async-storage/async-storage';
import { GraphQLWsLink } from "@apollo/client/link/subscriptions";
import { createClient } from "graphql-ws";
const wslink = new GraphQLWsLink(
createClient({
url: "ws://localhost:4000/subscriptions",
}),
);
const httpLink = new HttpLink({
uri: 'http://localhost:4000/graphql',
});
const authLink = setContext(async (_, { headers }) => {
const token = await AsyncStorage.getItem('token');
try {
if (token != null) {
return {
headers: {
...headers,
authorization: `Bearer ${token}` || null,
}
}
}
}
catch (error) {
throw error;
}
});
const splitLink = split(
({ query }) => {
const definition = getMainDefinition(query);
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
);
},
wslink,
authLink.concat(httpLink)
);
export const client = new ApolloClient({
link: splitLink,
cache: new InMemoryCache(),
});