rescript-urql 使用教程

rescript-urql 使用教程

rescript-urql ReScript bindings for Formidable's Universal React Query Library, urql. 项目地址: https://gitcode.com/gh_mirrors/res/rescript-urql

1. 项目介绍

rescript-urql 是一个为 rescript-react 提供的 GraphQL 客户端，允许你将组件连接到查询、突变和订阅。它提供了与 urql 的绑定，使你能够在 ReScript 中使用 urql 的 API，同时享受 ReScript 强大的类型系统和快速的编译速度。

rescript-urql 由 ReScript Brazil 社区维护，提供了以下主要功能：

• 完全支持的 GraphQL 客户端：适用于 rescript-react。
• 编译时类型和模式验证：确保你的查询和突变在编译时是类型安全的。
• 可定制的行为：通过交换机制（exchanges）实现行为的定制。
• 支持的钩子：包括 useQuery、useMutation、useSubscription 和 useClient 钩子。
• 服务器端渲染支持：与 Next.js 兼容。

2. 项目快速启动

安装依赖

首先，安装 rescript-urql 及其依赖项：

yarn add @urql/rescript urql graphql
yarn add gentype --dev

配置 bsconfig.json

在 bsconfig.json 中添加以下配置：

{
  "bs-dependencies": [
    "@urql/rescript",
    "wonka",
    "@reasonml-community/graphql-ppx"
  ],
  "ppx-flags": ["@reasonml-community/graphql-ppx/ppx"]
}

生成 GraphQL 模式文件

使用 graphql-cli 生成 GraphQL 模式文件：

npx get-graphql-schema ENDPOINT_URL -j > graphql_schema.json

示例代码

以下是一个简单的查询示例：

module Query = %graphql(`
  query {
    todos {
      id
      title
    }
  }
`);

@react.component
let make = () => {
  let (result, executeQuery) = Urql.useQuery({query: Query.definition});

  switch result {
  | { fetching: true } => <p> {React.string("Loading...")} </p>
  | { data: Some({ todos }) } =>
    <ul>
      {todos->Belt.Array.map(todo =>
         <li key={todo.id}> {React.string(todo.title)} </li>
       )->React.array}
    </ul>
  | { error: Some(error) } => <p> {React.string(error.message)} </p>
  | _ => <p> {React.string("No data found")} </p>
  }
};

3. 应用案例和最佳实践

应用案例

rescript-urql 适用于需要使用 GraphQL 进行数据获取和管理的 React 应用。例如，在一个待办事项应用中，你可以使用 rescript-urql 来获取待办事项列表，并使用突变来添加或删除待办事项。

最佳实践

• 使用编译时验证：利用 graphql-ppx 进行编译时类型验证，确保你的查询和突变在编译时是类型安全的。
• 定制交换机制：通过交换机制（exchanges）定制 urql 的行为，例如添加缓存策略或日志记录。
• 服务器端渲染：在 Next.js 应用中使用 rescript-urql 进行服务器端渲染，提升应用的性能和 SEO。

4. 典型生态项目

• urql：rescript-urql 是 urql 的 ReScript 绑定，urql 是一个轻量级的 GraphQL 客户端，支持 React、Preact 和 Svelte。
• graphql-ppx：用于 ReScript 的 GraphQL 预处理器，提供编译时类型验证和代码生成。
• Next.js：一个流行的 React 框架，支持服务器端渲染和静态站点生成，与 rescript-urql 兼容。

通过这些生态项目，你可以构建一个功能强大且类型安全的 GraphQL 应用。

rescript-urql ReScript bindings for Formidable's Universal React Query Library, urql. 项目地址: https://gitcode.com/gh_mirrors/res/rescript-urql