GraphQL API設計と開発実践：REST APIの課題を解決する次世代APIの構築

query GetUserProfile {
  user(id: "123") {
    id
    name
    email
    posts {
      title
      content
    }
  }
}

mutation CreatePost($title: String!, $content: String!) {
  createPost(title: $title, content: $content) {
    id
    title
  }
}

subscription OnNewMessage {
  newMessage {
    id
    text
    user {
      name
    }
  }
}

mkdir graphql-api-example
cd graphql-api-example
npm init -y
npm install apollo-server graphql

# schema.graphql
type User {
  id: ID!
  name: String!
  email: String!
  posts: [Post!]!
}
type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
}
type Query {
  users: [User!]!
  user(id: ID!): User
  posts: [Post!]!
  post(id: ID!): Post
}
type Mutation {
  createUser(name: String!, email: String!): User!
  createPost(title: String!, content: String!, authorId: ID!): Post!
}

// resolvers.js
const users = [
  { id: '1', name: 'Alice', email: 'alice@example.com' },
  { id: '2', name: 'Bob', email: 'bob@example.com' },
];
const posts = [
  { id: '101', title: 'GraphQL入門', content: 'GraphQLの基本を解説します', authorId: '1' },
  { id: '102', title: 'Apollo Server実践', content: 'Apollo Serverの構築方法', authorId: '1' },
  { id: '103', title: 'Go言語の並行処理', content: 'GoroutineとChannelの活用', authorId: '2' },
];
const resolvers = {
  Query: {
    users: () => users,
    user: (parent, { id }) => users.find(user => user.id === id),
    posts: () => posts,
    post: (parent, { id }) => posts.find(post => post.id === id),
  },
  Mutation: {
    createUser: (parent, { name, email }) => {
      const newUser = { id: String(users.length + 1), name, email };
      users.push(newUser);
      return newUser;
    },
    createPost: (parent, { title, content, authorId }) => {
      const newPost = { id: String(posts.length + 101), title, content, authorId };
      posts.push(newPost);
      return newPost;
    },
  },
  User: {
    posts: (parent) => posts.filter(post => post.authorId === parent.id),
  },
  Post: {
    author: (parent) => users.find(user => user.id === parent.authorId),
  },
};
module.exports = resolvers;

// index.js
const { ApolloServer } = require('apollo-server');
const fs = require('fs');
const path = require('path');
const resolvers = require('./resolvers');
// スキーマファイルを読み込む
const typeDefs = fs.readFileSync(path.join(__dirname, 'schema.graphql'), 'utf8');
const server = new ApolloServer({
  typeDefs,
  resolvers,
  // コンテキストに認証情報などを追加することも可能
  context: ({ req }) => {
    // 例: JWTトークンからユーザー情報を取得し、リゾルバに渡す
    const token = req.headers.authorization || '';
    // ここでトークンを検証し、ユーザー情報を取得
    const user = { id: '1', name: 'Authenticated User' }; // 仮のユーザー情報
    return { user };
  },
});
server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

// dataLoaders.js
const DataLoader = require('dataloader');
// ユーザーIDの配列を受け取り、対応するユーザーの配列を返すバッチ関数
const batchUsers = async (ids) => {
  // ここでデータベースから複数のユーザーを一度にフェッチするロジック
  console.log(`Fetching users with IDs: ${ids.join(', ')}`);
  const users = ids.map(id => ({ id, name: `User ${id}`, email: `user${id}@example.com` }));
  return ids.map(id => users.find(user => user.id === id));
};
// ポストIDの配列を受け取り、対応するポストの配列を返すバッチ関数
const batchPosts = async (ids) => {
  console.log(`Fetching posts with IDs: ${ids.join(', ')}`);
  const posts = ids.map(id => ({ id, title: `Post ${id}`, content: `Content of post ${id}`, authorId: String(Math.floor(Math.random() * 2) + 1) }));
  return ids.map(id => posts.find(post => post.id === id));
};
const createLoaders = () => ({
  userLoader: new DataLoader(batchUsers),
  postLoader: new DataLoader(batchPosts),
});
module.exports = createLoaders;

// index.js (context部分)
const createLoaders = require('./dataLoaders');
const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: ({ req }) => {
    // リクエストごとに新しいDataLoaderインスタンスを作成
    return { ...createLoaders(), user: { id: '1', name: 'Authenticated User' } };
  },
});

// resolvers.js (Userリゾルバの例)
const resolvers = {
  // ...
  User: {
    posts: (parent, args, context) => {
      // DataLoaderを使ってN+1問題を解決
      return context.postLoader.loadMany(parent.postIds); // parent.postIdsはUserエンティティに持たせる
    },
  },
  Post: {
    author: (parent, args, context) => {
      return context.userLoader.load(parent.authorId);
    },
  },
};

type Query {
  me: User @auth(requires: USER)
}
directive @auth(requires: Role = ADMIN) on FIELD_DEFINITION | OBJECT
enum Role {
  ADMIN
  USER
}

npm install @apollo/client graphql

// src/index.js (Reactアプリケーションの例)
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ApolloClient, InMemoryCache, ApolloProvider, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
const httpLink = createHttpLink({
  uri: 'http://localhost:4000/graphql',
});
const authLink = setContext((_, { headers }) => {
  // ローカルストレージなどから認証トークンを取得
  const token = localStorage.getItem('token');
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});
const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>
);

// src/components/UsersList.js
import React from 'react';
import { useQuery, gql } from '@apollo/client';
const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;
function UsersList() {
  const { loading, error, data } = useQuery(GET_USERS);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <div>
      <h2>Users</h2>
      <ul>
        {data.users.map((user) => (
          <li key={user.id}>{user.name} ({user.email})</li>
        ))}
      </ul>
    </div>
  );
}
export default UsersList;