urql
https://github.com/urql-graphql/urql/raw/main/packages/site/src/assets/sidebar-badge.svg
概要
軽量
table:_
urql Apollo Relay
10kB (11kB with bindings) ~50kB (55kB with React hooks) 45kB (66kB with bindings)
シンプル
Mutation によるデータ更新時も、キャッシュ上のどのデータを更新すべきかを知ることができる これにより、ネットワークアクセスを介さずにクライアントの状態を更新できる
urql is the only library that provides Offline Support out of the box as part of Graphcache's feature set.
正規化キャッシュも可能
Once you need the same features that you'll find in Relay and Apollo, it's possible to migrate to Graphcache.
ドキュメントキャッシュ
Mutation によるデータ更新後、同一 __typename を持つクエリのキャッシュを破棄して再取得する ネットワークアクセスの頻度は高くなるが、更新したデータを画面上に表示する必要がないアプリケーションの場合、正規化キャッシュ のように高度なキャッシュ戦略は不要 インストール
code:sh
$ npm install --save urql
Client インスタンスの生成
クエリの発行やキャッシュを管理する
code:src/main.tsx
import { cacheExchange, Client, fetchExchange } from "urql";
const client = new Client({
});
url: GraphQL サーバの URL
生成した Client を Context API を介して取得できるように、urql から提供されている <Provider> を用いる
code:src/main.tsx
import { Provider } from "urql";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<Provider value={client}>
<App />
</Provider>
</StrictMode>,
);
クエリの呼び出し
useQuery を用いる
code:tsx
import { gql, useQuery } from "urql";
query: gql`
posts(tags: $tags) {
title
body
author {
name
}
}
}
`,
variables: { tags },
});
const { data, fetching, error } = result;
戻り値として以下を返す
data: クエリの結果
error: エラー
fetching: 取得中か