GraphQL 05 実装ガイド(Codegen・Apollo・Relay・gql.tada)

npm install graphql @graphql-typed-document-node/core
npm install -D typescript @graphql-codegen/cli @parcel/watcher

import type { CodegenConfig } from '@graphql-codegen/cli'
const config: CodegenConfig = {
  schema: 'https://api.example.com/graphql',   // またはローカルの schema.graphql
  documents: ['src/**/*.tsx'],                   // フラグメント・クエリを書くファイル
  ignoreNoDocuments: true,
  generates: {
    './src/gql/': { preset: 'client' },          // graphql() と型が生成される
  },
}
export default config

// package.json
"scripts": { "codegen": "graphql-codegen", "codegen:watch": "graphql-codegen --watch" }

// src/components/PostCard.tsx
import { graphql, useFragment, type FragmentType } from '@/gql'
 
export const PostCard_post = graphql(`
  fragment PostCard_post on Post {
    title
    excerpt
    author { ...AuthorBadge_user }
  }
`)
 
export function PostCard(props: { post: FragmentType<typeof PostCard_post> }) {
  const post = useFragment(PostCard_post, props.post)
  return (
    <article>
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
      <AuthorBadge user={post.author} />
    </article>
  )
}

// src/app/posts/page.tsx(Apollo Client の例)
import { useQuery } from '@apollo/client'
import { graphql } from '@/gql'
const PostListQuery = graphql(`
  query PostList { posts(first: 20) { id ...PostCard_post } }
`)
export default function PostListPage() {
  const { data, loading, error } = useQuery(PostListQuery)
  if (loading) return <p>Loading...</p>
  if (error) return <p>Error</p>
  return data?.posts.map((p) => <PostCard key={p.id} post={p} />)
}