React Apollo Client调教升级手册

问题

业务复杂度、用户量的提升，不仅仅是考验服务端，也需要客户端做一些改进，所以仅仅在前人搭好apollo client，只会使用query、mutation传递参数，获取结果显的有点不足，也没能够深刻理解apollo，不满足于将来业务发展的需求。所以更加深入的来理解下Apollo client吧。

管理context

因为鉴权需要，需要动态生成鉴权参数，每一个请求都需要set不同的context,所以本周答赚项目上线鉴权做了一个僵硬的做法，给所有请求生成了一遍新的context,这样重复工作量就很大了，而且容易遗漏；

mutate({
    mutation: GQL.RewardMutation,
    variables: {
        reason: 'CLICK_DRAW_FEED',
    },
    context: getAuthContext(),
    refetchQueries: () => [
        {
            query: GQL.MeMetaQuery,
            variables: {
                refetch: 1,
            },
            context: getAuthContext(),
        },
    ],
})

所以想到了第一种改进方案，自己定义query/mutation manager，替换所有请求函数，在query/mutation manager中修改就行了，但是今天仔细想想还是很僵硬，它们应该不是用来干这种事，apollo自己应该能处理好；

image.png

https://www.apollographql.com/docs/react/api/link/introduction/#composing-a-link-chain

看了官方对于Apollo Link的解释可以知道我们需要自定义apollo Link，每个Link中的context都是可以修改的,最初的僵硬写法也是如此操作的

• 通过调用获取当前上下文对象operation.getContext()。
• 修改上下文对象，然后使用operation.setContext(newContext)将其写回

 const request = async (operation) => {
        const authContext = operation.getContext()?.headers || {};

        operation.setContext({
            headers: {
                token,
                ...headers,
                ...authContext,
                testHeader: true,
                Authorization: 'Bearer ' + token,
            },
        });
    };

所以可以在此位置直接动态生成context

 const request = async (operation) => {
        const authContext = getAuthContext();

        operation.setContext({
            headers: {
                token,
                ...headers,
                ...authContext,
                testHeader: true,
                Authorization: 'Bearer ' + token,
            },
        });
    };

错误策略

• 两种数据请求的错误：

GraphQL错误：GraphQL结果中的错误可能与正常结果一起出现，例如result.errors
服务器错误：服务器内部错误，例如500,403

但是apollo默认是任何GraphQL错误都与网络错误一样，apollo无法缓存graphql错误结果，同时还会被全局异常捕获，所以即使是服务端返回的graphql错误提示，都上传到了sentry，这显然不是我们想要的结果；所以我们可以：

//对需要的请求设置：
const result = useQuery(MY_QUERY, { errorPolicy: 'all' });
//也可以在New ApolloClient中为所有请求设置
const client = new ApolloClient({
  defaultOptions: {
     query: {
       fetchPolicy: 'network-only',
       errorPolicy: 'all',
     },
     mutate: {
      errorPolicy: 'all',
     },
  },
});

它将把服务端的错误和正确结果一起返回在result中

错误处理

Apollo Link对于处理网络错误的功能更加强大。最好的方法是使用@apollo/client/link/error来捕获和处理服务器错误，网络错误和GraphQL错误。

用法：

import { onError } from "@apollo/client/link/error";

const link = onError(({ graphQLErrors, networkError, operation }) => {
    console.log('ApolloLink onError');
    console.log('networkError', networkError);
    console.log('graphQLErrors', graphQLErrors);
    console.log('operation', operation?.operationName);
    if (graphQLErrors) {
        graphQLErrors.map((extensions, message) => {
            // gql error
            if (extensions?.code == '10110') {
                Toast.show({
                    content: message || '您的账号已被停用，如有疑问请加官方QQ群',
                });
                app.login && app.signOut();
            }
        });
    }

    if (networkError?.statusCode == 403) {
        console.log('networkError?.statusCode', networkError?.statusCode);
        Toast.show({
            content: '您的点击过快，请稍后再试',
        });
    }
}),

• operation：错误的操作
• response：来自服务器的响应
• graphQLErrors：来自GraphQL端点的错误数组
• networkError：链接执行或服务器响应期间的任何错误

所以通过此方法，可以更好的在全局管理gql错误以及network错误，针对不同的错误做出不同的处理