GraphQL ミューテーション

GraphQL セレクターは初期クエリを実行し、変更をサブスクライブします。 useMutation() や commitMutation() などの Relay API を使用して、サーバー上の状態を更新できます。これらの変更は同期され、Recoil GraphQL セレクターの更新をトリガーします。これにより、セレクターをローカルキャッシュとして、サーバーを信頼できる情報源として扱うことができます。

ミューテーションレスポンスは、更新時にサーバーから返されるデータを指定する必要があります。これにより、ローカルクライアントの状態が更新されます。これは、そのデータに基づく他の GraphQL クエリと Recoil セレクターが新しい状態で再レンダリングされるために必要です。GraphQL フラグメントを使用して、クエリとミューテーションが同じデータを返すようにすることをお勧めします。より複雑な更新の場合は、updater オプションを使用する必要がある場合があります。また、optimisticResponse または optimisticUpdater を使用して、サーバーからミューテーションのレスポンスを受け取る前にローカル状態を更新することもできます。エラーが発生した場合、楽観的更新はロールバックされます。いずれの場合も、ミューテーションがクエリとセレクターと同じ Relay 環境を使用していることを確認してください。

function MyComponent(props) {
  const user = useRecoilValue(userQuery(props.userID));
  const [commitEvent] = useMutation(graphql`
    mutation UserMutation($input: UsertNameChangeData!) {
      user_mutation(data: $input) {
        user {
          id
          name
        }
      }
    }
  `);

  return (
    <div>
      <h1>{user.name}</h1>
      <button onClick={() => {
        commitEvent({
          variables: {
            input: {
              id: props.userID,
              name: 'New Name',
            },
          },
        });
      }}>Change Name</button>
    </div>
  );
}

ライトスルーキャッシュ

状態の更新に使用できるもう1つのパターンは、Recoil セレクターをサーバーのローカルライトスルーキャッシュとして扱うことです。これは書き込み可能なセレクターであるため、ローカルの更新は UI にすぐに反映されます。 GraphQL ミューテーション 情報を提供すると、セレクターの更新によりサーバーへのミューテーションも開始されます。

const userState = graphQLSelector({
  key: 'User',
  environment: relayFBEnvironmentKey,
  query: graphql`
    query UserQuery($eventID: ID!, $clientID: ClientID!) {
      user(id: $eventID, client_id: $clientID) {
        name
        timestamp
      }
    }
  `,
  variables: id => ({get}) => ({id, clientID: get(clientIDAtom}),
  mapResponse: data => data.user,

  mutations: {
    mutation: graphql`
      mutation UserMutation($input: UserNameChangeData!) {
        user_mutation(data: $input) {
          user {
            id
            name
          }
        }
      }
    `,
    variables: newUserData => id => ({input: {id, name: newUserData.name}}),
  },
});

function MyComponent() {
  const [user, setUser] = useRecoilState(userState);

  return (
    <div>
      <h1>{user.name}</h1>
      <button onClick={() => {
        setUser(user => ({...user, name: 'New Name'}));
      }}>Change Name</button>
    </div>
  );
}

Recoil をこのようにライトスルーキャッシュとして使用する場合、セレクターの更新はリモートミューテーションがコミットされる前に UI を更新するため、Relay の「楽観的レスポンス」の概念はミューテーションには必要ありません。サーバーからエラーが発生した場合、ローカルの更新はロールバックされます。

ローカルアップデート

commitLocalUpdate() Relay API は、サーバーを更新するためのネットワークリクエストを発行せずに、GraphQL 状態をローカルに更新するために使用できます。更新により、影響を受けるクエリとセレクターをサブスクライブしているすべての関連コンポーネントが再レンダリングされます。