Relay提交Viewer变更后，如何更新子组件UI？

Hey there! Let's fix that UI update issue with your Relay mutation. The problem right now is that after you commit the mutation, Relay doesn't automatically know how to update the existing viewer record in its store—so we need to tell it explicitly in the updater function. Here's how to do it step by step:

Step 1: Update Your Mutation Query to Return the Updated Viewer #

First, modify your mutation's GraphQL definition to return the updated viewer object. This gives us access to the fresh data directly inside the updater:

const mutation = graphql`
  mutation UpdateDashboardMutation($input: UpdateDashboardMutationInput!) {
    updateDashboard(input: $input) {
      ok
      errors {
        field
        messages
      }
      viewer { # Add this to fetch the updated viewer data
        id
        firstName
      }
    }
  }
`;

Step 2: Add the id Field to Your Salutation Fragment #

Relay needs a unique identifier to locate the existing viewer record in its cache. Update your Salutation component's fragment to include the id field:

export default createFragmentContainer(Salutation, graphql`
  fragment Salutation_viewer on Viewer {
    id # Required to find the exact viewer record in Relay's store
    firstName
  }
`);

Step 3: Implement the Updater Function #

Now we can write the logic to update the existing viewer record in Relay's store with the new name. We'll grab the updated viewer from the mutation payload, find the existing viewer in the store, and overwrite its firstName value:

function UpdateDashboardMutation(firstName, viewerId) { // Add viewerId as a parameter
  commitMutation(
    environment,
    {
      mutation,
      variables: {
        input: {
          firstName,
          // Relay usually handles clientMutationId automatically, but include it if your API requires it
        },
      },
      updater(store) {
        // Get the mutation's response payload from the store
        const payload = store.getRootField('updateDashboard');
        if (!payload) return;

        // Extract the updated viewer data from the payload
        const updatedViewer = payload.getLinkedRecord('viewer');
        if (!updatedViewer) return;

        // Locate the existing viewer record using its unique ID
        const existingViewer = store.get(viewerId);
        if (!existingViewer) return;

        // Update the firstName field with the new value
        existingViewer.setValue(updatedViewer.getValue('firstName'), 'firstName');
      }
    }
  );
}

Step 4: Pass the Viewer ID to the Mutation #

Finally, update your Salutation component to pass the viewer's ID when calling the mutation:

_onChange(event) {
  UpdateDashboardMutation(event.currentTarget.value, this.props.viewer.id);
}

Why This Works #

• Returning the updated viewer from the mutation gives us direct access to the fresh data we need for the UI.
• The id field lets Relay precisely target the existing viewer record in its cache.
• Updating the field in the store triggers Relay to automatically re-render any components (like your Salutation) that depend on that data.

A quick bonus tip: You might want to add debouncing to the _onChange handler (e.g., using lodash.debounce) to avoid sending a mutation on every single keystroke—this will cut down on unnecessary API calls!

内容的提问来源于stack exchange，提问作者Martin S.