Recoil 與 GraphQL 搭配 Relay

recoil-relay NPM 程式庫可協助 Recoil 執行類型安全的有效率查詢，並透過 Relay 程式庫使用 GraphQL。它提供可輕鬆查詢 GraphQL 的選取器。查詢會與 Recoil 資料流程圖同步，因此下游選取器可根據查詢推演出狀態，它們可能會依賴上游 Recoil 狀態，且會自動訂閱 Relay 中圖表的所有變更。所有內容皆會自動同步。

範例

設定 Relay 環境後，新增 GraphQL 查詢就像定義一個 GraphQL 選取器 一樣容易。

const userNameQuery = graphQLSelector({
  key: 'UserName',
  environment: myEnvironment,
  query: graphql`
    query UserQuery($id: ID!) {
      user(id: $id) {
        name
      }
    }
  `,
  variables: ({get}) => ({id: get(currentIDAtom)}),
  mapResponse: data => data.user?.name,
});

然後像使用任何其他 Recoil 選取器 一樣使用。

function MyComponent() {
  const userName = useRecoilValue(userNameQuery);
  return <span>{userName}</span>;
}

安裝

請參閱 Recoil 安裝指南，瞭解如何安裝 Recoil 和 Relay 文件 以及 逐步指南，瞭解如何安裝和設定 Relay 程式庫、GraphQL 編譯器、Babel 外掛程式和 ESLint 外掛程式。然後新增 recoil-relay 作為依賴項。