Apolloメモ

リクエスト

• 手動でデータを取得するにはrefetchを使うか、useLazyQueryを使う。

• useSuspenseQueryを<Suspense>の子コンポーネントで使うと、リクエスト中はfallbackが表示される。

• <Suspense>の中に<Suspense>を入れると各<Suspense>内でデータを取得すると上位の<Suspense>でのデータ取得を待つ必要があるので表示が遅くなります。
  その場合はuseLoadableQuery、useBackgroundQuery、useReadQueryを使います。リクエストをスキップするにはskipTokenを指定します。

• Reactのスコープの外やルーターと組み合わせて使う場合はpreloadQueryを使う。

• mutationの結果(loading、errors)を初期化したい場合はresetを使う。(キャッシュは初期化されない)

キャッシュ

• __typenameとidでデータを特定してキャッシュに反映する。
  https://www.apollographql.com/docs/react/why-apollo/#zero-config-caching

• 同じクエリはキャッシュを利用することができるが、別のクエリで使用するには設定が必要
  https://www.apollographql.com/docs/react/caching/advanced-topics/#cache-redirects

• mutationの結果をキャッシュに反映したい場合は、mutationのレスポンスで__typenameとid(mutationの戻り値だけではidに対応するデータを取得する目的のキャッシュを変更することはできるが、キャッシュされている配列の中に存在するデータを変更することはできない)を返すか、update関数を定義するか、onQueryUpdatedコールバック関数を定義する。

• 手動でキャッシュを更新したい場合、client.refetchQueries()を使う。

フラグメント

• フラグメントは再利用可能な型の部分集合

• 以下のように埋め込むことができる

const FooFragment = gql`
  fragment FooFragment on Bar {
    name
  }
`;

const client = new ApolloClient({
  uri: 'https://example.com/',
  cache: new InMemoryCache({
    fragments: createFragmentRegistry(gql`
      ${UserFragment}
    `),
  }),
});

• フラグメントはそれを使うクエリに埋め込むかfragmentsオプションに登録する必要がある。

• フラグメントをコンポーネントに関連付ける例

• possibleTypesにinterfaceやunionの親子関係を記述する。
  https://the-guild.dev/graphql/codegen/plugins/other/fragment-matcher

• useFragmentを使うとフラグメントに関連したデータを効率的に取得することができます。

type

• 以下のように型のフィールドに引数を渡すことができる

type Car {
  id: ID!
  name: String!
  size(unit: LengthUnit = METER): Float
}

ディレクティブ

GraphQL標準のディレクティブ

https://spec.graphql.org/June2018/#sec-Type-System.Directives

@client

フィールドがローカルに存在するデータであり、そのデータ取得がサーバーへのクエリではなくクライアント側のキャッシュまたはローカルストアから行われることを示すフラグとして機能します。

@connect

@connectionディレクティブを付与すると、同じクエリでも@connectionディレクティブに与えられた値毎に別のクエリとして区別されます。これによって、同じクエリで用途に応じて複数の値をキャッシュすることができます。

@defer

指定したフィールドを遅延的に取得する。

@export

指定したフィールドを変数として使うことができるようにする。

@nonreactive

指定したフィールドが変更されても再レンダリングが発生しないようにする。