使用Apollo Client同时配置WebSocket、身份验证、HTTP和上传Link。
示例代码:
import { ApolloClient } from 'apollo-client';
import { split } from 'apollo-link';
import { WebSocketLink } from 'apollo-link-ws';
import { HttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { createUploadLink } from 'apollo-upload-client';
import { getMainDefinition } from 'apollo-utilities';
const wsLink = new WebSocketLink({
uri: `ws://localhost:4000/graphql`,
options: {
reconnect: true
}
});
const httpLink = new HttpLink({
uri: '/graphql',
credentials: 'same-origin'
});
const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem('token');
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : ''
}
};
});
const uploadLink = createUploadLink({
uri: '/graphql',
credentials: 'same-origin'
});
const link = split(
({ query }) => {
const { kind, operation } = getMainDefinition(query);
return kind === 'OperationDefinition' && operation === 'subscription';
},
wsLink,
authLink.concat(uploadLink).concat(httpLink)
);
const client = new ApolloClient({
link,
cache: new InMemoryCache()
});
以上代码中,WebSocket、HTTP和上传Link分别通过WebSocketLink、HttpLink和createUploadLink创建。身份验证Link则使用setContext设置请求头。最后使用split函数将WebSocket和非WebSocket请求分别处理。