graphQLSelectorFamily()

graphQLSelectorFamily() は graphQLSelector() と似ていますが、パラメータを受け取り、そのパラメータに対するセレクタを返す関数を返します。 これにより、基本的に呼び出し元のコンポーネントから props や他の状態に基づいてクエリにパラメータを渡すことができます。

---

function graphQLSelectorFamily<
  TVariables: Variables,
  TData: $ReadOnly<{[string]: mixed}>,
  P: Parameter = TVariables,
  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
    | P => TVariables | null
    | P => ({get: GetRecoilValue}) => TVariables | null,

  mapReponse:
    | (TData, {get: GetRecoilValue, variables: TVariables}) => T
    | (TData, {get: GetRecoilValue, variables: TVariables}) => P => T,

  default?:
    | T
    | P => T,

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

}): P => 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 = graphQLSelectorFamily({
  key: 'EventQuery',
  environment: myEnvironment,
  query: graphql`
    query MyEventQuery($id: ID!) {
      myevent(id: $id) {
        id
        name
      }
    }
  `,
  variables: id => ({id}),
  mapResponse: data => data.myevent,
});

function MyComponent(props) {
  const eventInfo = useRecoilValue(eventQuery(props.eventID));

  return (
    <div>
      <h1>{eventInfo.name}</h1>
    </div>
  );
}

パラメータとアップストリーム状態を持つクエリ

variables と mapResponse は、パラメータと他のアップストリーム Recoil アトム/セレクタの両方に依存できます。

const eventQuery = graphQLSelectorFamily({
  key: 'EventQuery',
  environment: myEnvironment,
  query: graphql`
    query MyEventQuery($id: ID!) {
      myevent(id: $id) {
        id
        name
      }
    }
  `,
  variables: id => ({get}) => ({id, clientID: get(clientIDAtom)}),
  mapResponse: (data, {get}) => id => ({
    id,
    name: data.myevent?.name,
    region: get(regionForIDSelector(id)),
  }),
});