React-Apollo中Update与Refetch对比及Mutation后数据更新问题咨询

Hey there, let's break down your questions and issues clearly:

Is using the Mutation update function the standard way to refresh UI after a mutation? #

Absolutely! The update function is one of the most recommended and standard approaches by Apollo Client for updating UI after a mutation. Unlike refetching queries (which requires extra network calls), it directly modifies the client-side cache to reflect the latest data—making UI updates instant and more efficient.

Here's how it works: after your mutation succeeds, the update function gets called with two arguments:

• cache: The current Apollo Client cache instance
• mutationResult: The data returned from your mutation

You can use methods like cache.writeQuery or cache.modify to update the cached data that your Query components depend on. For example, if you just created a new item and want to add it to an existing list in your UI:

<Mutation
  mutation={CREATE_ITEM}
  update={(cache, { data: { createItem } }) => {
    // Read existing data from the cache
    const { items } = cache.readQuery({ query: GET_ITEMS });
    // Update the cache with the new item
    cache.writeQuery({
      query: GET_ITEMS,
      data: { items: [...items, createItem] },
    });
  }}
>
  {(createItem) => <button onClick={() => createItem()}>Add New Item</button>}
</Mutation>

This approach avoids unnecessary network requests and ensures your UI stays in sync with the mutation results immediately.

Why isn't refetchQueries working correctly? #

The mismatch you're seeing (where refetchQueries returns CREATED but the database has PICKED) usually stems from a few common issues:

• Cache vs. network priority: If your Query component uses the default cache-first fetch policy, Apollo might still return cached data even after refetchQueries runs. Try explicitly setting fetchPolicy: 'network-only' in your refetchQueries config to force a fresh server request:

  <Mutation
    mutation={YOUR_MUTATION}
    refetchQueries={[{
      query: YOUR_QUERY,
      variables: { /* match your Query component's variables */ },
      fetchPolicy: 'network-only'
    }]}
  >
    {/* ... */}
  </Mutation>
  

• Mismatched query structure/variables: Double-check that the query and variables in refetchQueries exactly match what your <Query> component uses. If there's a mismatch (e.g., missing variables or different field selections), Apollo might not update the right cache entry.

• Server-side resolver issue: It's possible your mutation resolver is returning outdated data (like the pre-mutation CREATED status) instead of the updated PICKED value from the database. Verify your server code to ensure the mutation returns the latest state of the record.

Quick note on your current workaround #

Using the Query component's refetch prop is a valid workaround, but it's less efficient than the update function since it triggers an extra network request. If your use case allows for direct cache manipulation, stick with update for better performance. Reserve refetching for scenarios where you need to guarantee full server sync (e.g., complex data dependencies that are hard to update via cache).

内容的提问来源于stack exchange，提问作者Jamie Hutber