前端工程师想要学习 GraphQL，并且发现 Hasura 很适合的事情

1 年 ago
新, 韵
2 minutes

首先

我是一名二年级的前端工程师。最近开始使用GraphQL进行工作，所以我进行了学习。在这个过程中，我发现使用Hasura可以轻松地构建GraphQL服务器，并且前端工程师可以快速掌握GraphQL。因此，我决定将这些经验整理在一篇文章中。

这篇文章所涉及的内容 ?‍♂️

    • GraphQL の概要

 

    • Hasura の概要

 

    Hasura を用いた GraphQL サーバーの構築手順と、クライアント側からデータの取得までのざっくりした流れ

这个文章没有提及的事情 ?‍♂️

    • Typescript や React の基本的な内容

 

    GraphQL クライアントライブラリの使い方

这里有几个需要注意的地方?

    • Applo Server とか Prisma などでも GraphQL サーバーを作れるのですが、自分は試してないので比較はしてません

 

    実は GraphQL を実務で用いた経験は現時点（2022年10月22日）ではありません。。ですので実務で使用した際に 「もっとこういう方法でキャッチアップしておけばよかった」「Hasuraより ◯◯ の方がよかった」 などあれば随時加筆修正を行いますのでご了承ください。

关于GraphQL

首先，GraphQL 是什么？以下是官方网站的 Deepl 翻译版本。

GraphQL是一种用于API的查询语言，也是用于执行查询的运行时。GraphQL提供了对API中数据的完全理解和易于描述的能力，并赋予客户端只请求所需内容的能力，从而使得随时间推移API的演进变得容易，并可能实现强大的开发者工具。

参考：https://graphql.org/。

我认为是一种既能理解又无法理解的感觉，所以我会试着将重要的概念解释得更简明扼要一些。

API的查询语言是什么？

查询是指英语单词“问询”、“访问”等的意思。如果您曾经使用过SQL等，应该很容易理解。请参考下图，我想您会更容易理解。

image.png

只要对数据源进行查询的语言有一定的了解，就可以暂时放心。

提供易于理解API内数据的描述

在GraphQL中，可以使用GraphQL模式来描述API的数据规范。

type Book {
    id: ID!
    name: String
    pageCount: Int
    author: Author
}

在上述的 GraphQL 文件中，通过架构定义来定义客户端可以操作的查询和各种类型。

实际的数据操作由解析器来完成。通过使用解析器，我们可以为每个查询指定返回哪些数据的关联信息。这是由GraphQL服务器开发人员提供的。以下是在先前的文件中添加解析器后的内容。

type Book {
    id: ID
    name: String
    pageCount: Int
    author: Author
}

type Query {
    bookById(id: ID): Book
}

bookById是一个方法，它接受一个id作为参数，并返回一个Book对象。关于GraphQL模式和解析器的更详细理解，请阅读以下文章。

 

赋予客户仅需求所需之力量

只需要与数据源进行交互，不使用REST就可以吗？这样的话，为什么不考虑GraphQL呢？因为GraphQL有一个重大的好处，即可以”仅请求所需”。举个例子，假设我们要创建一个只显示姓和名的卡片（为了简单起见）。

スクリーンショット 2022-10-23 14.52.36.png

让我们看一下 REST API 的终端点和其响应。虽然我们只需要 “firstName” 和 “lastName” 这两个数据来展示姓名，但我们却获取了不必要的值，如 “hobby” 和 “birthday”。这种情况被称为过度获取。

スクリーンショット 2022-10-23 15.06.41.png

使用GraphQL可以避免REST API中常见的过度获取问题。

スクリーンショット 2022-10-23 15.14.34.png

用GraphQL可以做的事情总结

    • データソースとのやりとりができる

 

    • APIのデータ仕様（実際にやり取りする値やメソッド）を記述することができる

 

    フロントエンド側でクエリを実行することでオーバーフェッチを抑えることができる

搭建服务器很麻烦吗？

现在，我们已经介绍了GraphQL的概述。 如何从GraphQL服务器获取数据并显示到前端页面。

クエリを投げる
そのクエリを叩いた時に、どんなデータを返すかをリゾルバを用いてデータ操作を行う

我发现了一件事。构建解析器当然需要后端知识，但是我在考虑“我对后端知识了解不多，是否有更简单的方法来构建GraphQL服务器呢？”于是我找到了Hasura。

Hasura 是什么

image.png

構築GraphQL服务器。

让我们来看一下构建GraphQL服务器（Hasura）的流程，这样就能更快地了解Hasura有多方便了。关于详细的使用方法和控制台设置步骤，可以参考官方教程，非常易懂。在这里，只需要了解一下整体的氛围，就可以了?

创建表

スクリーンショット 2022-10-23 10.28.57.png

填写必要的属性、默认值和主键等。

验证生成的GraphQL API

创建一个表格，然后神奇地，GraphQL 的 API 就被创建了出来。

スクリーンショット 2022-10-23 10.36.49.png

只需要定义数据库的表，就可以为基本的CRUD操作创建GraphQL解析器。如果没有特别复杂的处理，几乎可以零开发成本来实现解析器。

我们来尝试调整左侧边栏上的“Explorer”，它会自动为我们生成查询，并且可以在GraphiQL上进行操作确认。让我们随便调整一下并进行确认。

スクリーンショット 2022-10-23 10.49.52.png

我在客户端尝试获取数据。

手动生成数据

スクリーンショット 2022-10-23 10.58.59.png

安装 Graph QL 客户端库

GraphQL客户端库有许多选择，例如Apollo Server、urql、Relay等，但本次我们将使用urql。请安装您喜欢的任一库并使用。

npm install urql graphql

请在任何库中指定BaseURL和header选项，然后设置在Hasura控制台中显示的GraphQL Endpoint和x-hasura-admin-secret。

const gqlClient = createClient({
  url: エンドポイント,
  fetchOptions: {
    headers: {
      'content-type': 'application/json',
      'x-hasura-admin-secret': シークレットキー,
    },
  },
});

root.render(
  <React.StrictMode>
    <Provider value={gqlClient}>
      <App />
    </Provider>
  </React.StrictMode>
);

请使用Context API来提供Client以便使用。详细信息请参阅官方网站。

我试着提取数据。

请执行之前创建的查询以获取所有记录，并在控制台上显示。

const query = gql`
  query {
    posts {
      id
      title
      created_at
      content
    }
  }
`;

function App() {
  const [result] = useQuery({
    query: query,
  });
  const { data, fetching, error } = result;

  if (fetching) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  console.log(data.posts);
  // 以下略
スクリーンショット 2022-10-23 14.23.28.png

最终

我觉得 Hasura 对于前端工程师来说，学习使用 GraphQL 很方便，所以我把它总结成了一篇文章。写完后我意识到，如果只是简单地获取和显示数据，可能这样的工具已经足够了。不过，如果使用 Hasura，还可以创建CRDU的API，所以有时间的话，建议在个人开发等过程中尝试使用 Hasura 来熟悉 GraphQL。对于我这样没有服务端开发经验，对搭建 GraphQL 服务器和解析器感到有些困难的人来说，Hasura 可以自动生成解析器，省去了服务端实现的麻烦，因此我推荐 Hasura 作为前端工程师更轻松地学习和使用 GraphQL 的选择之一。如果有更好的学习方式或者内容上的错误，欢迎指正和提出意见。

✖
广告
将在 10 秒后关闭
bannerAds