首先

这次我为了学习也整理了一下关于GraphQL的常用流程。虽然我经常接触GraphQL，但是对它的理解还不够，所以希望能够借此机会更加深入地理解它。

GraphQL 是什么

这是一种用于开发API的查询语言。我对其有一个大概的理解，即可以通过发送查询来获得服务器上的数据，并仅获取所需的信息。

查询和变更

GraphQL有两种或三种主要指令类型，分别是查询（query）和变更（mutation）。（还有一种叫订阅（subscription），但是我没有使用过。）

• query

• データを取得するときにサーバーに送る指令。データの変更はない。

• mutation

データを追加、更新、削除をする時にサーバーに送る司令。データの変更が生じる。

通过使用这样的指令，我们可以获取所需的数据。如果是电子商务网站，当我们想要获取商品的价格、名称、库存等信息时，就会使用这些指令。

添加查询字段

现在我们来看一下查询和变更的前端实现。以下是Graphql文件。

query GetUser {
  user {
    id
    name
  }
}

这是一个简单的查询，用于获取用户信息。
尽管是用户信息，但这个查询只能使用用户ID和姓名。
现在考虑一下如果前端需要用户的年龄的情况。

确认用户的年龄age是否存在。

我们的结论是需要在id和name之后追加age。

query GetUser {
  user {
    id
    name
    age
  }
}

但是，如果查询的定义中没有age字段，即使添加了也无法使用。我们需要确认可以添加什么类型的字段。
可以在启动服务器后，通过浏览器打开 localhost:####/graphiql（其中####是您设置的个别编号）来确认可以添加的字段名称。
在右边的Documentation Explorer中可以查看数据结构。在那里，我们可以跟踪查询>用户>，如果age字段存在，则可以通过上述方法添加age，使前端也能使用年龄信息。
有关graphiql的详细信息，请参阅以下内容。

在React中使用查询

使用React的hook——useQuery来调用查询并获取数据。
首先，需要将之前编写的GraphQL文件转换为JavaScript可以读取的语言，以便在React中使用。为此，需要生成与GraphQL文件对应的JS文件（或TS文件）。生成工作通常是通过运行特定命令来完成的，但具体命令可能因开发环境而异（？），这里暂不详述。也就是说，我其实也不太清楚呢w
对这个问题，我就敷衍一下吧。

我被告知，实际上，与其使用useQuery，不如使用use~Query()这种钩子，因为它可以用于每个查询，可以不带参数地编写代码，看起来更清晰。关于这个问题，我无法很好地表达，也没有很好地理解。由于与Apollo库相关，我打算以后整理关于Apollo的内容。以下是参考资料。

在生成的文件中，包含了可以在JS内使用的与查询相应的内容。例如，在上面的示例中，

export function useGetUserQuery() {}

应该有这样的东西。换句话说，useGetUserQuery()是一个可以在JavaScript中使用的函数，当调用它时可以获得用户信息。具体来说，

const { data, loading } = useGetUserQuery()

这样做的话，用户信息将会存储在数据中，如果想知道用户ID的话，

data.id

可以获得。

总结

添加字段等事项通常变得模糊不清，因此进行了总结。总结后，可以意识到需要对各种知识有一定理解。通过展示输出，我们能够切身感受到自己的不理解程度，因此有意识地重视输出。