reactjs - 如何在 React 中为上传和订阅设置 Apollo 客户端？

Question

我想用 React 设置一个 graphql 客户端，用于上传文件和处理来自 graphql 服务器的订阅。文件上传和其他查询运行良好。问题在于订阅。我在浏览器控制台中收到以下错误： WebSocket connection to 'ws://localhost:3001/subscriptions' failed: Connection closed before receiving a handshake response

我用于apollo-upload-client文件上传和apollo-link-ws订阅。

我可以看到 subscriptions-transport-ws建议使用createNetworkInterface，addGraphQLSubscriptions但这种方法与apollo-upload-client仅支持createUploadLink.

我被困住了。请帮忙。

我这样设置我的客户：

import React from 'react';
import ApolloClient from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { createUploadLink } from 'apollo-upload-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink, Observable, split } from 'apollo-link';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';


const cache = new InMemoryCache();

const request = async (operation) => {
    const token = localStorage.getItem('token');
    operation.setContext({
        headers: {
            authorization: token ? `Bearer ${token}` : '',
        },
    });
};

const httpLink = createUploadLink({ uri: 'http://localhost:3001/graphql' });

// Create a WebSocket link:
const wsLink = new WebSocketLink({
    uri: 'ws://localhost:3001/subscriptions',
    options: {
        reconnect: true
    },
});

// 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 { kind, operation } = getMainDefinition(query);
        return kind === 'OperationDefinition' && operation === 'subscription';
    },
    wsLink,
    httpLink,
);


const requestLink = new ApolloLink((operation, forward) =>
    new Observable((observer) => {
        let handle;
        Promise.resolve(operation)
            .then(oper => request(oper))
            .then(() => {
                handle = forward(operation).subscribe({
                    next: observer.next.bind(observer),
                    error: observer.error.bind(observer),
                    complete: observer.complete.bind(observer),
                });
            })
            .catch(observer.error.bind(observer));

        return () => {
            if (handle) handle.unsubscribe();
        };
    }));

const apolloClient = new ApolloClient({
    link: ApolloLink.from([
        requestLink,
        link,
    ]),
    cache,
});

export const withApolloClient = App => (
    <ApolloProvider client={apolloClient}>
        <App client={apolloClient} />
    </ApolloProvider>
);

export default apolloClient;

标签： reactjsfile-uploadreact-apolloapollo-clientgraphql-subscriptions

Answer 1

我正在使用类似的配置，但不是WebSocketLink从apollo-link-ws导入，而是从@apollo/client.

通过该设置，我可以同时进行订阅和上传。

import { WebSocketLink } from "@apollo/client/link/ws";