ApolloClient configuration with createUploadLink and WebSocketLink

Viewed 700

I want to be able to upload files from my React Native App for which I need to use createUploadLink but I am facing some problems configuring it.

My current setup looks like this:

import SInfo from "react-native-sensitive-info";
import Config from "react-native-config";
import { InMemoryCache, ApolloClient } from "apollo-boost";
import { createHttpLink } from "apollo-link-http";
import { createUploadLink } from "apollo-upload-client";
import { WebSocketLink } from "apollo-link-ws";
import { setContext } from "apollo-link-context";
import { getMainDefinition } from "apollo-utilities";
import { split } from "apollo-link";

let token: any;

const getToken = async () => {
  if (token != null) {
    return token;
  }

  token = await SInfo.getItem("ACCESS_TOKEN", {});
  return token;
};

export const cache = new InMemoryCache();

// Create a WebSocket link:
const wsLink = new WebSocketLink({
  uri: Config.SUBSCRIPTION_SERVER,
  options: {
    reconnect: true,
  },
});

const httpLink = createHttpLink({ uri: Config.GRAPHQL_SERVER });
const uploadLink = createUploadLink({ uri: Config.GRAPHQL_SERVER });

const authLink = setContext(async (_, { headers }) => {
  await getToken();
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : null,
    },
  };
});

const linkConcated = authLink.concat(httpLink);

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const link = split(
  // split based on operation type
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === "OperationDefinition" &&
      definition.operation === "subscription"
    );
  },
  wsLink,
  linkConcated
);

export const client = new ApolloClient({
  link,
  cache,
});

I also tried the approach with ApolloLink.from([]) but it is not letting me add it. And also tried replacing it with createHttpLink as I need only one as per my understanding.

I get the following error:

const uploadLink: ApolloLink
Argument of type 'ApolloLink' is not assignable to parameter of type 'ApolloLink | RequestHandler'.
  Type 'import("/home/musayyab/Desktop/projects/Talent/Native-App/app/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' is not assignable to type 'import("/home/musayyab/Desktop/projects/Talent/Native-App/app/node_modules/apollo-link/lib/link").ApolloLink'.
    Types of property 'split' are incompatible.
      Type '(test: (op: import("/home/musayyab/Desktop/projects/Talent/Native-App/app/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/home/musayyab/Desktop/projects/Talent/Native-App/app/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/home/musayyab/Desktop/projects/Ta...' is not assignable to type '(test: (op: import("/home/musayyab/Desktop/projects/Talent/Native-App/app/node_modules/apollo-link/lib/types").Operation) => boolean, left: import("/home/musayyab/Desktop/projects/Talent/Native-App/app/node_modules/apollo-link/lib/link").ApolloLink | import("/home/musayyab/Desktop/projects/Talent/Native-App/app/node...'.
        Types of parameters 'test' and 'test' are incompatible.
          Types of parameters 'op' and 'op' are incompatible.
            Property 'toKey' is missing in type 'import("/home/musayyab/Desktop/projects/Talent/Native-App/app/node_modules/@apollo/client/link/core/types").Operation' but required in type 'import("/home/musayyab/Desktop/projects/Talent/Native-App/app/node_modules/apollo-link/lib/types").Operation'.ts(2345)
types.d.ts(24, 5): 'toKey' is declared here.

I would appreciate any help.

0 Answers
Related