---
title: ent.について_クライアントサイド実装編
tags: 
author: [Katsushi21](https://convert.docswell.com/user/Katsushi21)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/VJNMRYY178.jpg?width=480
description: ent.について_クライアントサイド実装編 by Katsushi21
published: January 18, 24
canonical: https://convert.docswell.com/s/Katsushi21/5Q8JYX-2024-01-18-005720
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/VJNMRYY178.jpg)

1/9
ent.について
クライアントサイド実装編


# Page. 2

![Page Image](https://bcdn.docswell.com/page/YE9NMPPYE3.jpg)

2/9
前回までのあらすじ
・ent.を用いてGraphQLサーバーを立てた
クライアント
これから実装
リゾルバ
ORM(ent.)
実装完了
DB


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GE8KLDDK7D.jpg)

3/9
GraphQLクライアントライブラリ
・Apollo Client
最も使われているクライアントライブラリ。
機能が充実しているが、複雑な設定を行う必要がある。
GraphQLを利用し、リモートとローカルの状態管理ができる
・Relay
高度な機能を多数そろえたライブラリ。
複雑な実装が必要だが、使いこなせば非常に便利。
・Urql
軽量かつ多数の機能を持つライブラリ。
シンプルな記述で実装ができる。
Document cachingという独自のキャッシュ機構を持つ


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LELZLMMPJR.jpg)

4/9
GraphQLクライアントライブラリ比較
urql
Apollo Relay


# Page. 5

![Page Image](https://bcdn.docswell.com/page/4JMVMYY2JW.jpg)

5/9
Urqlによるクライアントサイド実装
クライアントインスタンス作成時、
&quot;Exchange&quot;による拡張設定により、通信時の設定などを行う
このインスタンスを通信処理に渡してデータ通信を行う


# Page. 6

![Page Image](https://bcdn.docswell.com/page/PJR2V995E9.jpg)

6/9
graphql-codegenによるフック自動作成・型付け
GraphQLサーバーとクエリを用意すれば、
自動でUrqlフックを作成してくれ、
関数と結果の型付けも行ってくれる
自動作成されたフック
取得したデータの型


# Page. 7

![Page Image](https://bcdn.docswell.com/page/PEXDZQQX7X.jpg)

7/9
・・・
取得したデータを表示させるコード
投稿者の名前
「いいね」した人数
取得したデータをmap関数で
Postコンポーネントに引き渡す
コメントの数
渡されたデータから値を取り出す


# Page. 8

![Page Image](https://bcdn.docswell.com/page/3EKX89997D.jpg)

8/9
取得したデータの画面表示
GraphQLサーバーから受け取ったデータを画面上に表示した
画像
タイトル
アバター&amp;名前
いいね
コメント


# Page. 9

![Page Image](https://bcdn.docswell.com/page/L7352WW9E5.jpg)

9/9
まとめ &amp; 次回予告
・GraphQLのクライアントライブラリは様々な種類がある
Apollo ClientやRelay、Urqlなどのライブラリを、
ユースケースに合わせて検討する
・graphql-codegenを使用して、フックを自動で作成できる
自動作成されたフックを使い、データフェッチ処理を
手軽に行うことができる
・ユーザー体験をより良くするために…
より高速なサイト実現のため、キャッシュ管理やSSRなどを
効率よく行うライブラリの模索を続行


