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错误，针对不同的错误做出不同的处理
