問(wèn)題
業(yè)務(wù)復(fù)雜度脱篙、用戶量的提升盹愚，不僅僅是考驗(yàn)服務(wù)端，也需要客戶端做一些改進(jìn)遭商，所以僅僅在前人搭好apollo client屯阀，只會(huì)使用query缅帘、mutation傳遞參數(shù)，獲取結(jié)果顯的有點(diǎn)不足蹲盘，也沒(méi)能夠深刻理解apollo股毫，不滿足于將來(lái)業(yè)務(wù)發(fā)展的需求。所以更加深入的來(lái)理解下Apollo client吧召衔。
管理context
因?yàn)殍b權(quán)需要铃诬，需要?jiǎng)討B(tài)生成鑒權(quán)參數(shù)，每一個(gè)請(qǐng)求都需要set不同的context,所以本周答賺項(xiàng)目上線鑒權(quán)做了一個(gè)僵硬的做法苍凛，給所有請(qǐng)求生成了一遍新的context,這樣重復(fù)工作量就很大了趣席，而且容易遺漏；
mutate({
mutation: GQL.RewardMutation,
variables: {
reason: 'CLICK_DRAW_FEED',
},
context: getAuthContext(),
refetchQueries: () => [
{
query: GQL.MeMetaQuery,
variables: {
refetch: 1,
},
context: getAuthContext(),
},
],
})
所以想到了第一種改進(jìn)方案醇蝴，自己定義query/mutation manager宣肚，替換所有請(qǐng)求函數(shù)，在query/mutation manager中修改就行了悠栓，但是今天仔細(xì)想想還是很僵硬霉涨，它們應(yīng)該不是用來(lái)干這種事，apollo自己應(yīng)該能處理好惭适；
https://www.apollographql.com/docs/react/api/link/introduction/#composing-a-link-chain
看了官方對(duì)于Apollo Link的解釋可以知道我們需要自定義apollo Link笙瑟，每個(gè)Link中的context都是可以修改的,最初的僵硬寫法也是如此操作的
- 通過(guò)調(diào)用獲取當(dāng)前上下文對(duì)象operation.getContext()。
- 修改上下文對(duì)象癞志，然后使用operation.setContext(newContext)將其寫回
const request = async (operation) => {
const authContext = operation.getContext()?.headers || {};
operation.setContext({
headers: {
token,
...headers,
...authContext,
testHeader: true,
Authorization: 'Bearer ' + token,
},
});
};
所以可以在此位置直接動(dòng)態(tài)生成context
const request = async (operation) => {
const authContext = getAuthContext();
operation.setContext({
headers: {
token,
...headers,
...authContext,
testHeader: true,
Authorization: 'Bearer ' + token,
},
});
};
錯(cuò)誤策略
- 兩種數(shù)據(jù)請(qǐng)求的錯(cuò)誤：
GraphQL錯(cuò)誤：GraphQL結(jié)果中的錯(cuò)誤可能與正常結(jié)果一起出現(xiàn)往枷，例如result.errors
服務(wù)器錯(cuò)誤：服務(wù)器內(nèi)部錯(cuò)誤，例如500,403
但是apollo默認(rèn)是任何GraphQL錯(cuò)誤都與網(wǎng)絡(luò)錯(cuò)誤一樣，apollo無(wú)法緩存graphql錯(cuò)誤結(jié)果错洁，同時(shí)還會(huì)被全局異常捕獲秉宿，所以即使是服務(wù)端返回的graphql錯(cuò)誤提示，都上傳到了sentry屯碴，這顯然不是我們想要的結(jié)果描睦；所以我們可以：
//對(duì)需要的請(qǐng)求設(shè)置：
const result = useQuery(MY_QUERY, { errorPolicy: 'all' });
//也可以在New ApolloClient中為所有請(qǐng)求設(shè)置
const client = new ApolloClient({
defaultOptions: {
query: {
fetchPolicy: 'network-only',
errorPolicy: 'all',
},
mutate: {
errorPolicy: 'all',
},
},
});
它將把服務(wù)端的錯(cuò)誤和正確結(jié)果一起返回在result中
錯(cuò)誤處理
Apollo Link對(duì)于處理網(wǎng)絡(luò)錯(cuò)誤的功能更加強(qiáng)大。最好的方法是使用@apollo/client/link/error來(lái)捕獲和處理服務(wù)器錯(cuò)誤窿锉，網(wǎng)絡(luò)錯(cuò)誤和GraphQL錯(cuò)誤酌摇。
用法：
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 || '您的賬號(hào)已被停用，如有疑問(wèn)請(qǐng)加官方QQ群',
});
app.login && app.signOut();
}
});
}
if (networkError?.statusCode == 403) {
console.log('networkError?.statusCode', networkError?.statusCode);
Toast.show({
content: '您的點(diǎn)擊過(guò)快嗡载，請(qǐng)稍后再試',
});
}
}),
- operation：錯(cuò)誤的操作
- response：來(lái)自服務(wù)器的響應(yīng)
- graphQLErrors：來(lái)自GraphQL端點(diǎn)的錯(cuò)誤數(shù)組
- networkError：鏈接執(zhí)行或服務(wù)器響應(yīng)期間的任何錯(cuò)誤
所以通過(guò)此方法窑多，可以更好的在全局管理gql錯(cuò)誤以及network錯(cuò)誤，針對(duì)不同的錯(cuò)誤做出不同的處理
