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 作為 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 伺服器狀態的本機快取，作為真實來源。它是可寫的，可以設定為在寫入時對伺服器提交突變。請參閱寫入快取範例。