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 环境或一个 EnvironmentKey 与周围的 <RecoilRelayEnvironment> 中提供的环境匹配。
• query - 一个 GraphQL 查询或订阅。 片段 在查询中得到支持。
• variables - 回调以提供用于查询的 变量 对象。这可能是变量对象本身，也可以是提供家庭参数并返回变量的回调函数。还可以使用嵌套回调函数，该函数接收一个 get() 函数，允许选择器引用其他上游 Recoil 原子/选择器。如果为变量提供 null，则不会执行任何查询，而是使用 default 值。
• mapResponse - 回调函数，用于转换 GraphQL 结果，以便用作选择器的值。它还提供了一个 get() 函数，以便它可以引用其他 Recoil 原子/选择器来执行转换。还可以使用接收家庭参数的嵌套回调函数。
• default - 如果为 variables 提供 null，则使用的默认值。可以使用接收家庭参数作为参数的回调函数。如果未提供 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)),
  }),
});