Apollo Cache Update

5099 ワード
Cache useApolloClient apollo refetch writeFragment テキストリンク
Cache
  • ApolloクライアントはGraphQL Queryをキャッシュに格納します.
    • Update Cache
  • cacheを更新する方法は大きく2つあります.

  • キャッシュの直接更新

  • 再構築query
    1.キャッシュの直接更新
  • writeFragmentを使用してキャッシュの一部を置き換えます.
  • Ex) 
    • const client = useApolloClient()
client.writeFragment({
    id: `User: ${id}`,
    fragment: gql`
        fragment EditUser on User {
            email
        }
    `
    data: {
        email: newEmail,
    }

})
    2.検索Query
    1)useQueryでrefetch
  • userQueryには「refetch」というresultプロパティがあり、クエリーをrefetchできます.
  • Ex) 
    const { { ok }: data, refetch } = useQuery(GET_GREETING, {
      variables: { language: 'english' },
    });
if(ok) {
    await refetch();
}
    • 2)useMutationでrefretch
  • useMutationには、クエリをreferenceできるreferenceQueriesというオプションがあります.
  • refetchは、変異操作が完了すると自動的に発生します.
  • Ex) 
    const [addTodo, { data }] = useMutation(ADD_TODO, {
  refetchQueries: [{ query: TO_DO}],
});
  • 1メソッドはapiを送信しないので、通常1メソッドは
    • より速い.
    https://www.apollographql.com/docs/react/caching
    https://www.apollographql.com/docs/react/api/react/hooks/#usequery
    https://www.apollographql.com/docs/react/api/react/hooks/#usemutation
    MySQL HandleSocket
    fuzzymath ()