graphQLSelector()

graphQLSelector() 创建一个 Recoil 选择器，该选择器与提供的 Relay 环境和 GraphQL 查询或订阅同步。选择器将自动更新任何延迟数据、实时查询，或者如果执行任何本地提交或更新会改变图的该部分。选择器就像一个本地缓存，服务器作为真实来源。它可写，可以配置为在更新为直通缓存时将变异提交到服务器。

如果你想从消费者调用站点传递参数到查询变量，请考虑使用 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 环境或 EnvironmentKey，用于与周围的 <RecoilRelayEnvironment>提供的环境匹配。
• query - GraphQL 查询或订阅。 片段 在查询中受支持。
• variables - 回调以提供 变量 对象，用于查询。这可能是变量对象本身，或者是一个回调，它有一个 get() 函数，允许选择器引用其他上游 Recoil 原子/选择器。如果提供 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 服务器状态的本地缓存，服务器状态是真实来源。它可写，可以配置为如果写入，则会将变异提交到服务器。请参阅 直通缓存示例.