Recoil 和 Relay 的 GraphQL

recoil-relay NPM 库帮助 Recoil 使用 GraphQL 和 Relay 库执行类型安全且高效的查询。它提供选择器，可以轻松地使用 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 作为依赖项。