时间戳

首页 > 解决方案 > 使用 createUploadLink 和 WebSocketLink 配置 ApolloClient

typescript - 使用 createUploadLink 和 WebSocketLink 配置 ApolloClient

问题描述

我希望能够从我需要使用的 React Native App 上传文件，createUploadLink但我在配置它时遇到了一些问题。

我当前的设置如下所示：

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,
});

我也尝试了这种方法，ApolloLink.from([])但它不允许我添加它。并且还尝试用我的理解替换它，createHttpLink因为我只需要一个。

我收到以下错误：

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.

我将不胜感激任何帮助。

标签： typescriptreact-nativegraphqlapolloapollo-client

解决方案

推荐阅读