前言
随着GraphQL的普及，许多Web应用也开始采用GraphQL API来访问和管理数据。@bilgorajskim/ra-data-graphql-simple是一款基于React-Admin的GraphQL数据提供程序，可以让前端开发人员使用简单的API来管理数据。接下来，我们将详细介绍如何使用@bilgorajskim/ra-data-graphql-simple提供程序。
安装
您可以使用npm包管理器来安装@bilgorajskim/ra-data-graphql-simple：
npm install --save @bilgorajskim/ra-data-graphql-simple
使用
以下是使用@bilgorajskim/ra-data-graphql-simple的基本步骤：
步骤1：设置客户端
使用apollo-client设置GraphQL客户端，作为数据提供程序的参数。这样我们就可以连接到GraphQL API并请求数据。
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------- ------ - -------------- - ---- ------------------- ------ - ------------- - ---- ------------------------ ------ - ------ -------- - ---- -------------- ------ -------------------- ---- --------------------------------------- ----- -------- - ---------------- ---- ------------------------------- --- ----- ------ - --- -------------- ----- --------- ------ --- ---------------- --- ----- ------------ - ---------------------- ------ ---
步骤2：创建Reource组件
在React-Admin中，每个数据对象都由一个资源组件来表示。资源组件包括数据组件以及定义交互方式的参数。
例如：
-- -------------------- ---- -------
------ - ----- --------- --------- - ---- --------------
----- -------- - ------- -- -
----- -----------
----------
---------- ----------- --
---------- -------------- --
---------- ------------- --
-----------
-------
--在上面的代码中，我们使用List组件作为资源组件，并指定Datagrid子组件来描述数据组件的结构。
步骤3：定义资源
在React-Admin中，您需要指定哪些数据可以在应用程序中使用。使用Resource组件定义资源。
<Resource name="posts" list={PostList} />;在本例中，我们使用name属性来指定GraphQL API上的“帖子”类型。您可以在PostList组件中使用该类型来渲染帖子列表。
步骤4：设置应用程序
最后，将应用程序组件包装在Admin组件中。
const App = () => (
<Admin dataProvider={dataProvider}>
<Resource name="posts" list={PostList} />
</Admin>
);现在，您已准备好加载应用程序并使用GraphQL API进行数据访问和管理。下面是完整的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- ----------------
------ - -------------- - ---- -------------------
------ - ------------- - ---- ------------------------
------ - ------ -------- - ---- --------------
------ -------------------- ---- ---------------------------------------
------ - ----- --------- --------- - ---- --------------
----- -------- - ---------------- ---- ------------------------------- ---
----- ------ - --- --------------
----- ---------
------ --- ----------------
---
----- ------------ - ---------------------- ------ ---
----- -------- - ------- -- -
----- -----------
----------
---------- ----------- --
---------- -------------- --
---------- ------------- --
-----------
-------
--
----- --- - -- -- -
------ ----------------------------
--------- ------------ --------------- --
--------
--
------ ------- ----注意事项
- 您需要设置GraphQL API的URI，例如上面代码中的
http://localhost:4000/graphql - 如果您想使用查询和变异参数，请参阅
@bilgorajskim/ra-data-graphql-simple的官方文档。
结论
@bilgorajskim/ra-data-graphql-simple是一款可轻松管理GraphQL API数据的强大提供程序。我们希望本教程可以帮助您充分了解如何使用这个npm包，并在实际应用中有所裨益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f78238a385564ab6954