@apollo/client

フロントエンドでGraphQLクエリを送受信するためのApollo公式クライアント。キャッシュ管理なども提供。

InmemoryCache

Introduction

Why Apollo Client?

Get started

Fetching

Suspense

Fragments

Refetching

Subscriptions

Directives

Error handling

Document transforms

Deferring response data

Best practices

Pagination

Overview

Core API

Offset-based

Cursor-based

keyArgs

Development &Testing

Developer tools

Using TypeScript

Testing React components

Schema-driven testing

Mocking schema capabilities

Reducing bundle size

Performance

Improving performance

Optimistic mutation results

Server-side rendering

Compiling queries with Babel

Integrations

Using Apollo Client with your view layer

Integrating with React Native

Loading queries with Webpack

Networking

Basic HTTP networking

Advanced HTTP networking

Authentication

Migration

Migrating to Apollo Client 3.0

Hooks migration guide

ApI reference

Code

ApolloClient

InMemoryCache

ObservableQuery

React

Hooks

Preloading

Testing

SSR

Apollo Link

Overview

HTTP

HTTP Batch

Context

Error

Persisted Queries

Remove Typename

REST

Retry

Schema

Subscriptions (newer protocol)

WebSocket (older protocol)

Community links

query系

特徴

データの正規化構造を持っている

__typename fieldと id fieldをkeyにする

キャッシュ機構を組み込める

クエリを発行するとローカルのキャッシュに問い合わせ、データが無ければリモートのGraphQLサーバーに問い合わせを行う

リクエストしたデータがローカルに存在しているかどうか、ネットワーク上に取りに行く必要があるのかを気にすることなくデータへのアクセスを行うことが出来ます

ローカルのキャッシュへのアクセスもネットワーク越しでのデータアクセスも同様のクエリで実行します

Local Stateも管理できる

各種環境向けに用意されている

JavaScript

React

Angular

Vue

Svelte

Ember

Meteor (thanks to DDP-Apollo)

Web Components

Apollo Elements

Native mobile

Native iOS with Swift

Native Android with Java and Kotlin

apollo-cache-inmemory

キャッシュを追加

apollo-link-http

エンドポイントを追加

リクエストをカスタマイズ

apollo-client

ミドルウェアをカスタマイズ

リンクをカスタマイズ

graphql-tag

graphqlのクエリをテンプレートリテラルで書ける

apollo-boost

graphqlのクライアントライブラリの一式

graphql-code-generator

rect hooks

query系の集まり

Apollo Clientのケーススタディとして、メジャーリーグサッカーのアプリケーションでは5000行近くのReduxのコードを削除することに成功した事例が掲載されています。

cache