简介
GraphQL 是一种由 Facebook 开发的数据查询语言和运行时。它提供了一种更高效、强大和灵活的方式来获取数据，而且还可以避免过度获取数据和数据冗余的问题。Relay 是一个由 Facebook 开发的用于构建高性能、可扩展、数据驱动的 React 应用程序的 JavaScript 框架。它使用 GraphQL 作为数据查询语言，并提供了一种优化数据获取的方式。本文将介绍如何使用 GraphQL 连接 Relay。
前置知识
在阅读本文之前，你需要了解以下知识：
- React
- GraphQL
- Relay
步骤
1. 安装 Relay 和 GraphQL
首先，你需要安装 Relay 和 GraphQL。你可以使用 npm 或 yarn 来安装它们：
npm install --save react-relay graphql
或者
yarn add react-relay graphql
2. 创建 GraphQL Schema
在使用 Relay 之前，你需要创建一个 GraphQL Schema。你可以使用任何支持 GraphQL 的后端来创建一个 Schema。在这里，我们将使用一个简单的例子来说明如何创建一个 Schema。
我们假设有一个电影数据库，其中包含电影的名称、导演、演员和评分。我们可以使用以下代码来创建一个 GraphQL Schema：
-- -------------------- ---- ------- ---- ----- - --- --- ----- ------- --------- ------- ------- ---------- ------- ------ - ---- ----- - --------- ----- ----- ------- --------- - ------ - ------ ----- -
3. 创建 Relay Environment
接下来，你需要创建一个 Relay Environment。Relay Environment 是一个用于管理数据的对象，它负责发出 GraphQL 查询并缓存查询结果。你可以使用以下代码来创建一个 Relay Environment：
-- -------------------- ---- -------
------ - ------------ -------- ------------- ----- - ---- ----------------
-------- --------------------- ---------- -
------ ----------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------
------ ---------------
----------
---
---------------- -- -
------ ----------------
---
-
----- ------- - ---------------------------
----- ----- - --- --------- ----------------
----- ----------- - --- -------------
--------
------
---这里的 fetchQuery 函数用于向 GraphQL 服务器发出查询请求。在这个例子中，我们假设 GraphQL 服务器的端点是 /graphql。
4. 创建 GraphQL Query
现在，你可以创建一个 GraphQL Query 来获取电影列表。你可以使用以下代码来创建一个 GraphQL Query：
-- -------------------- ---- -------
----- -------------- -
------ -
--
----
--------
------
------
-
-5. 创建 React 组件
接下来，你可以创建一个 React 组件来显示电影列表。你可以使用以下代码来创建一个 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- ------------- - ---- --------------
------ ----------- ---- ---------------------
----- --------- - -- ----- -- -- -
-- ------------- -
------ ------------------
-
-- -------------- -
------ ----------------------
-
----- - ------ - - ------------
------ -
----
----------------- -- -
--- ---------------
---------------------
------------ --------------------
---------- --------------------- -------
---------- ------------------
-----
---
-----
--
--
------ ------- --------
----- -------------- -
------ -
--
----
--------
------
------
-
-
-------------这里的 graphql 函数用于将 GraphQL Query 与 React 组件关联起来。在这个例子中，我们将 MovieListQuery 与 MovieList 组件关联起来。
6. 渲染 React 组件
最后，你可以将 React 组件渲染到页面上。你可以使用以下代码来渲染 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ --------- ---- --------------
----------------
--------------
-------------------------
---------------
----- -------- -
------------------
-
--
---------- ------ ----- -- -- -
-- ------- -
------ ------------------
-
-- -------- -
------ ----------------------
-
------ ---------- ------------- ---
--
---
-------------------------------
--这里的 QueryRenderer 组件用于将 GraphQL Query 渲染到页面上。在这个例子中，我们将 AppQuery 与 QueryRenderer 组件关联起来，并将 MovieList 组件作为子组件传递给 QueryRenderer 组件。
总结
在本文中，我们介绍了如何使用 GraphQL 连接 Relay。我们首先创建了一个 GraphQL Schema，然后创建了一个 Relay Environment，接着创建了一个 GraphQL Query 和一个 React 组件，并最后将 React 组件渲染到页面上。通过这些步骤，我们可以使用 Relay 来更高效、强大和灵活地获取数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cf51ceadd4f0e0ff89a227