Apollo GraphQL执行Mutation后查询返回空数据致组件渲染失败

Hey there, I’ve run into almost this exact issue with Apollo GraphQL and cached data inconsistencies—let’s break down what’s going on and fix it step by step.

Core Issue Analysis #

The root problem here is almost certainly Apollo’s cache not updating correctly after your mutation runs. When you add a new contact via mutation, Apollo might fail to automatically merge the new data into the existing list’s cache entry. This leaves your detail component trying to render outdated (or even undefined) list data. Refreshing works because it bypasses the cache and pulls fresh data directly from the server.

1. Ensure Your Mutation Returns Complete, Linked Data #

Apollo relies on mutation return data to auto-update its cache. If your mutation only returns the new contact without linking it to the parent list (via the list’s ID), Apollo can’t identify which cache entry to update.

Double-check your mutation definition to confirm it returns:

• The full new contact object (all fields your detail component uses)
• The listId (or equivalent field that links the contact to its parent list)
• Ideally, the parent list’s id and its updated contacts array (if your schema supports nested returns)

Example mutation query:

mutation AddContact($input: AddContactInput!) {
  addContact(input: $input) {
    contact {
      id
      name
      email
      phone
      # All fields your component renders
    }
    listId # Critical for linking to the parent list’s cache
  }
}

2. Manually Update the Apollo Cache (Most Reliable Fix) #

Automatic cache updates often fail with nested or non-standard data structures. Use the update function in useMutation to explicitly modify the cache and add the new contact to the correct list.

Here’s a working code example:

import { useMutation, useQuery } from '@apollo/client';
import { ADD_CONTACT, GET_LIST_CONTACTS } from './your-query-files';

const ContactListDetail = ({ listId }) => {
  const { data, loading } = useQuery(GET_LIST_CONTACTS, { variables: { listId } });
  
  const [addContact] = useMutation(ADD_CONTACT, {
    update(cache, { data: { addContact } }) {
      // Read the current contacts for this list from the cache
      const existingListData = cache.readQuery({
        query: GET_LIST_CONTACTS,
        variables: { listId }
      });

      // If existing data exists, append the new contact to the list
      if (existingListData?.list?.contacts) {
        cache.writeQuery({
          query: GET_LIST_CONTACTS,
          variables: { listId },
          data: {
            list: {
              ...existingListData.list,
              contacts: [...existingListData.list.contacts, addContact.contact]
            }
          }
        });
      }
    },
    // Optional: Refetch the list data after mutation (as a fallback)
    refetchQueries: [{ query: GET_LIST_CONTACTS, variables: { listId } }]
  });

  // Prevent map errors with loading/empty state checks
  if (loading) return <div>Loading contacts...</div>;
  if (!data?.list?.contacts) return <div>No contacts in this list yet</div>;

  return (
    <div>
      <h2>Contact List</h2>
      {data.list.contacts.map(contact => (
        <div key={contact.id} className="contact-item">
          <p>{contact.name} | {contact.email}</p>
        </div>
      ))}
      {/* Your add contact button/input form here */}
    </div>
  );
};

3. Fix Refetch Query Issues #

If your refetch returns empty data, verify these points:

• You’re passing the correct variables (like listId) to the refetch query—Apollo needs this to fetch the right list’s contacts.
• The refetch query matches the initial list query exactly (same fields, same structure).
• Use the refetchQueries option in useMutation (shown above) instead of manual refetch calls—it runs only after the mutation succeeds.

4. Add Explicit Loading & Empty State Handling #

The map undefined error happens because your component tries to render data.list.contacts before it’s available (either pre-initial load or post-mutation cache inconsistency). Adding these checks eliminates the error entirely:

• Check for the loading state first and show a loading indicator.
• Verify data?.list?.contacts exists before calling map—if not, show a friendly empty state message.

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