【GraphQL × Relay】Fragmentを@inlineで読み込む

Fragmentをinlineで読み込む方法

主にRelayでFragmentを展開する方法として「useFragment」と「readInData」があり、useFragmentを使うのが基本ですが、useFragmentでデータがうまく取れず、代わりにreadInDataを試したところうまく動いたため、その時の備忘録です。
※この記事のAPIはGithub Graphql Apiを使っています

import { graphql } from 'react-relay'

export const repositoryQuery = graphql`
  query repositoryQuery {
    repository(owner: "Yosuke23" name: "nextjs_relay_demo") {
      ...repositoryFragment
    },
    user(login: "Yosuke23") {
      ...userFragment
    }
  }
`

このrepositoryFragmentをuseFragmentではなくreadInDataで読み込みたい場合は、、、

import { graphql } from "relay-runtime";

export const repositoryFragment = graphql`
    fragment repositoryFragment on Repository @inline{
         name
         url
         createdAt
    }
`

fragmentオブジェクトの頭に@inlineを指定してコンパイラーを走らせます

👇がこのfragmentの読み込み方法です

import {repositoryFragment$key as repositoryFragmentRef} from '../../queries/__generated__/repositoryFragment.graphql';
import { repositoryFragment } from '../../queries/repositoryFragment';
import { useQueryLoader, readInlineData } from 'react-relay'
import type {repositoryQuery as repositoryQueryType} from '../../queries/__generated__/repositoryQuery.graphql';
import {repositoryQuery} from '../../queries/repository';

  const [, loadRepositoryQuery] = useQueryLoader(repositoryQuery, initialRepositoryRef!)
  useEffect
    (() => {
      loadRepositoryQuery({})
    }, [])

まず大元のクエリであり、repositoryFragmentを含むrepositoryQueryをロード。
repositoryQueryをロードしてもrepositoryFragmentは展開されないのでuseFragmentもしくは readInlineData（今回はこっち）でFragmentオブジェクトを「使える様に」展開。

  const githubRepositoryData = readInlineData<repositoryFragmentRef>(repositoryFragment, githubDemoContext?.data?.repository ?? null);

repositoryFragmentRefはrepositoryFragmentコンパイル時に生成されるKey型
第一引数は、普通にrepositoryFragment自体のgraphqlファイルで第二引数は実際そのfragment
箇所にセットされる実データ。
$key型に合う様に渡してあげる。
これで、fragmentデータの取得ができました。

参考：https://relay.dev/docs/api-reference/graphql-and-directives/#inline