Hasura GraphQL Engine 的 React Admin 数据提供者

项目介绍

ra-data-hasura 是一个为 Hasura GraphQL Engine 定制的 React Admin 数据提供者。它是一个基于 GraphQL 的数据提供者，专为 React Admin v4 设计，能够直接与 Hasura GraphQL 端点进行交互。对于使用 React Admin v3 的用户，可以使用 v0.4.2 版本的库。

项目快速启动

安装

首先，使用 npm 安装 ra-data-hasura：

npm install --save graphql ra-data-hasura

使用

以下是一个简单的示例，展示如何初始化 ra-data-hasura 并将其与 React Admin 结合使用：

import React, { useState, useEffect } from 'react';
import buildHasuraProvider from 'ra-data-hasura';
import { Admin, Resource } from 'react-admin';
import { PostCreate, PostEdit, PostList } from './posts';

const App = () => {
  const [dataProvider, setDataProvider] = useState(null);

  useEffect(() => {
    const buildDataProvider = async () => {
      const dataProvider = await buildHasuraProvider({
        clientOptions: { uri: 'http://localhost:8080/v1/graphql' }
      });
      setDataProvider(() => dataProvider);
    };
    buildDataProvider();
  }, []);

  if (!dataProvider) return <p>Loading...</p>;

  return (
    <Admin dataProvider={dataProvider}>
      <Resource name="Post" list={PostList} edit={PostEdit} create={PostCreate} />
    </Admin>
  );
};

export default App;

应用案例和最佳实践

应用案例

ra-data-hasura 可以用于构建基于 Hasura GraphQL Engine 的后台管理系统。例如，可以使用它来管理博客文章、用户数据等。

最佳实践

1. 自定义 Apollo 客户端：可以通过配置 Apollo 客户端来添加认证头或其他自定义选项。
2. 自定义查询：可以通过自定义查询来扩展或修改默认的 GraphQL 查询。
3. 嵌套过滤：支持使用 # 作为字段分隔符进行嵌套过滤。

典型生态项目

Hasura GraphQL Engine

Hasura GraphQL Engine 是一个开源的 GraphQL 服务器，它可以将现有的数据库转换为 GraphQL API。它与 ra-data-hasura 结合使用，可以快速构建强大的后台管理系统。

React Admin

React Admin 是一个基于 React 的前端框架，用于构建数据驱动的应用程序。它支持多种数据提供者，ra-data-hasura 是其中之一，专门用于与 Hasura GraphQL Engine 集成。

Apollo Client

Apollo Client 是一个功能强大的 GraphQL 客户端，用于管理应用程序中的数据。ra-data-hasura 使用 Apollo Client 与 Hasura GraphQL Engine 进行通信。

通过这些生态项目的结合，开发者可以快速构建出高效、可扩展的后台管理系统。