graphQLSelector()

graphQLSelector() は、提供された Relay 環境と GraphQL クエリまたはサブスクリプション と同期する Recoil セレクタ を作成します。セレクタは、遅延データ、ライブクエリ、またはグラフのその部分を変更するローカルコミットまたは更新が実行された場合に自動的に更新されます。セレクタは、サーバーを信頼できるソースとするローカルキャッシュのように機能します。書き込み可能であり、ライトスルーキャッシュとして更新されたときにサーバーにミューテーションをコミットするように構成できます。

コンシューマーの呼び出し元からクエリ変数にパラメーターを渡したい場合は、graphQLSelectorFamily() を検討してください。

---

function graphQLSelector<
  TVariables: Variables,
  TData: $ReadOnly<{[string]: mixed}>,
  T = TData,
  TRawResponse = void,
  TMutationVariables: Variables = {},
  TMutationData: $ReadOnly<{[string]: mixed}> = {},
  TMutationRawResponse = void,
>({
  key: string,

  environment: IEnvironment | EnvironmentKey,

  query:
    | Query<TVariables, TData, TRawResponse>
    | GraphQLSubscription<TVariables, TData, TRawResponse>,

  variables:
    | TVariables
    | (({get: GetRecoilValue}) => (TVariables | null)),

  mapReponse: (TData, {get: GetRecoilValue, variables: TVariable}) => T,

  default?: T,

  mutations?: {
    mutation: Mutation<TMutationVariables, TMudationData, TMutationRawResposne>,
    variables: T => TMutationVariables | null,
  },

}): RecoilState<T>

• key - セレクタを識別するために使用される一意の文字列。
• environment - Relay 環境、または周囲の <RecoilRelayEnvironment> によって提供される環境と一致させるための EnvironmentKey。
• query - GraphQL クエリまたはサブスクリプション。フラグメント はクエリでサポートされています。
• variables - クエリに使用する 変数 オブジェクトを提供するためのコールバック。これは、変数オブジェクトを直接指定することも、セレクタが他のアップストリーム Recoil アトム/セレクタを参照できるようにする get() 関数を持つコールバックを指定することもできます。変数として null が提供された場合、クエリは実行されず、代わりに default 値が使用されます。
• mapResponse - セレクタの値として使用するために GraphQL の結果を変換するためのコールバック。また、get() 関数も提供されるため、他の Recoil アトム/セレクタを参照して変換を実行できます。
• default - null が variables として提供された場合に使用されるデフォルト値。default が提供されない場合、セレクタは保留状態のままになります。
• mutations - セレクタが明示的に書き込まれた場合にコミットする GraphQL ミューテーション と変数のオプション構成。

---

簡単な例

const eventQuery = graphQLSelector({
  key: 'EventQuery',
  environment: myEnvironment,
  query: graphql`
    query MyEventQuery($id: ID!) {
      myevent(id: $id) {
        id
        name
      }
    }
  `,
  variables: {id: 123},
  mapResponse: data => data,
});

Recoil 状態に基づくクエリ

クエリに使用される variables は、他のアップストリーム Recoil 状態に依存できます。クエリはこのアップストリーム状態をサブスクライブし、アップストリーム状態が変更されると自動的に更新されます。

const eventQuery = graphQLSelector({
  key: 'EventQuery',
  environment: myEnvironment,
  query: graphql`
    query MyEventQuery($id: ID!) {
      myevent(id: $id) {
        id
        name
      }
    }
  `,
  variables: ({get}) => ({id: get(currentIDAtom)}),
  mapResponse: data => data.myevent,
});

レスポンスの変換

mapResponse オプションを使用することにより、サーバーからのレスポンスをセレクタに使用する値に変換できます。

const eventNameQuery = graphQLSelector({
  key: 'EventNameQuery',
  environment: myEnvironment,
  query: graphql`
    query MyEventQuery($id: ID!) {
      myevent(id: $id) {
        id
        name
      }
    }
  `,
  variables: ({get}) => ({id: get(currentIDAtom)}),
  mapResponse: data => data.myevent?.name,
});

変換は、他の Recoil アトム/セレクタを参照することもできます。そのアップストリーム状態をサブスクライブし、アップストリーム状態が変更されると自動的に更新されます。

const eventNameQuery = graphQLSelector({
  key: 'EventNameQuery',
  environment: myEnvironment,
  query: graphql`
    query MyEventQuery($id: ID!) {
      myevent(id: $id) {
        id
        name
      }
    }
  `,
  variables: ({get}) => ({id: get(currentIDAtom)}),
  mapResponse: (data, {get}) => get(prefixAtom) + ':' + data.myevent?.name,
});

クエリのスキップ

変数は動的なアップストリーム状態に依存できるため、一部の状態ではクエリを発行したくない場合があります。variables に null を返すことで、常にクエリの発行を回避できます。この場合、default 値が使用されます。default が提供されない場合、セレクタは保留状態のままになります。

const eventNameQuery = graphQLSelector({
  key: 'EventNameQuery',
  environment: myEnvironment,
  query: graphql`
    query MyEventQuery($id: ID!) {
      myevent(id: $id) {
        id
        name
      }
    }
  `,
  default: 'PLACEHOLDER NAME',
  variables: ({get}) => {
    const id = get(currentIDAtom);
    if (!isIDValid(id)) {
      return null;
    } else {
      return {id};
    }
  },
  mapResponse: data => data.myevent?.name,
});

GraphQL フラグメント

GraphQL フラグメント もクエリでサポートされています。

ミューテーション

graphQLSelector() は、GraphQL サーバー状態を信頼できるソースとするローカルキャッシュとして機能します。書き込み可能であり、書き込まれた場合にサーバーにミューテーションをコミットするように構成できます。ライトスルーキャッシュの例 を参照してください。