利用 React+Graphql-Yoga+Urql 畅快构建 GraphQL 应用

2023-10-30 15:14:17

如今，构建 API 的主流方式主要分为 RESTful API 和 GraphQL API，前者作为传统方式拥有广泛应用基础，但随着复杂业务场景不断涌现，RESTful API 的弊端逐渐显现，而 GraphQL 作为新兴的技术体系则应运而生，凭借其强大的数据查询能力和灵活性，迅速吸引了众多开发者的目光。

GraphQL 是一款由 Facebook 开发的开源查询语言，旨在为 API 提供一种更有效、更灵活的替代方案。与 RESTful API 不同，GraphQL 采用单一端点并允许客户端指定所需的数据，从而避免了过度获取或欠缺所需数据的情况。此外，GraphQL 还可以通过使用类型系统来定义数据结构，从而为客户端提供了更强大的数据查询能力。

在本文中，我们将使用 React 作为前端框架，GraphQL Yoga 作为 GraphQL 服务端框架，以及 Urql 作为 GraphQL 客户端库，以此构建一个简单的 GraphQL 应用。我们将在其中一步步实现最经典的 Hello World 代码，让您快速入门 GraphQL 开发。

前端准备

首先，我们需要安装必要的依赖项：

npm install react react-dom graphql urql

然后，我们创建 React 应用的入口文件，比如 index.js：

import React from "react";
import ReactDOM from "react-dom";
import { Query } from "urql";

const App = () => (
  <Query query="query { hello }">
    {({ data }) => {
      if (data) {
        return <div>{data.hello}</div>;
      }
      return <div>Loading...</div>;
    }}
  </Query>
);

ReactDOM.render(<App />, document.getElementById("root"));

后端准备

接下来，我们需要安装后端依赖项：

npm install graphql-yoga

然后，我们创建 GraphQL 服务端，比如 server.js：

const { GraphQLServer } = require("graphql-yoga");
const resolvers = {
  Query: {
    hello: () => "Hello World!",
  },
};

const server = new GraphQLServer({
  resolvers,
});

server.start(() => console.log("Server is running on port 4000"));