mu-suke

<h2 id="%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AE%E3%82%B4%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AE%E3%82%B4%E3%83%BC%E3%83%AB" aria-hidden="true"></a> この記事のゴール</h2>
GraphQLのクエリの書き方をhaakusurukoto
<h2 id="%E7%8F%BE%E7%8A%B6%E3%81%AE%E8%AA%B2%E9%A1%8C%E7%82%B9">
<a class="header-anchor-link" href="#%E7%8F%BE%E7%8A%B6%E3%81%AE%E8%AA%B2%E9%A1%8C%E7%82%B9" aria-hidden="true"></a> 現状の課題点</h2>
<ul>
<li>query呼び出し時に引数をどうやって指定するかが分かっていない</li>
</ul>
<h2 id="%E5%86%8D%E7%8F%BE%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E5%86%8D%E7%8F%BE%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 再現環境</h2>
<table>
<thead>
<tr>
<th>ツール・ライブラリ</th>
<th>用途</th>
<th>バージョン</th>
</tr>
</thead>
<tbody>
<tr>
<td>Next.js</td>
<td>フロントエンドとして利用</td>
<td>12.1.0</td>
</tr>
<tr>
<td>NestJS</td>
<td>サーバーサイドとして利用</td>
<td>8.0.0</td>
</tr>
<tr>
<td>GraphQL Code Generator</td>
<td>コード自動生成ツール</td>
<td>2.6.2</td>
</tr>
<tr>
<td>URQL</td>
<td>GraphQL Clientのライブラリ</td>
<td>2.2.0</td>
</tr>
<tr>
<td>node.js</td>
<td>フロント、サーバーサイドの実行環境</td>
<td>v16.14.0</td>
</tr>
</tbody>
</table>

コード生成用のgql
<div class="code-block-container"><pre class="language-graphql"><code class="language-graphql">query Users($usersInput: PaginatedUsersInput!) {
 users(usersInput: $usersInput) {
 ...paginatedUsers
 }
}
</code></pre></div>呼び出し側
<div class="code-block-container"><pre class="language-typescript"><code class="language-typescript"> const [result] = useUsers({
 variables: { usersInput: { limit: 3, after: null } },
 })
</code></pre></div>

ツール・ライブラリ	用途	バージョン
Next.js	フロントエンドとして利用	12.1.0
NestJS	サーバーサイドとして利用	8.0.0
GraphQL Code Generator	コード自動生成ツール	2.6.2
URQL	GraphQL Clientのライブラリ	2.2.0
node.js	フロント、サーバーサイドの実行環境	v16.14.0