Next.jsとGraphQLの統合

Next.jsとGraphQLは、効率的なデータフェッチとサーバーサイドレンダリングを組み合わせるために非常に強力なツールです。Next.jsでは、API Routesを利用してGraphQLサーバーを簡単に設定でき、Apollo Clientを用いてフロントエンドからGraphQLのデータを取得できます。

Apollo Clientのセットアップ

まず、Apollo Clientを使ってGraphQL APIにクエリを送信します。以下の手順で進めます。

  1. 必要なパッケージをインストールします。

    npm install @apollo/client graphql

  2. Apollo Clientインスタンスを作成します。apollo-client.jsというファイルを作成し、次のように設定します。

    import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
const createApolloClient = () => {
  return new ApolloClient({
    link: new HttpLink({
      uri: '/api/graphql', // GraphQLエンドポイント
    }),
    cache: new InMemoryCache(),
  });
};
export default createApolloClient;

  3. ApolloProviderでアプリ全体をラップします。_app.jsでApollo Clientを追加します。

    import { ApolloProvider } from '@apollo/client';
import createApolloClient from '../apollo-client';
const client = createApolloClient();
function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}
export default MyApp;

GraphQLサーバーの構築

Next.jsのAPI Routesを使用して、GraphQLサーバーを構築することも可能です。これにより、独自のGraphQL APIを実装できます。

  1. apollo-server-microを使ってAPI Routeを作成します。次のコマンドでApollo Serverをインストールします。

    npm install apollo-server-micro

  2. pages/api/graphql.jsファイルを作成し、Apollo Serverを設定します。

    import { ApolloServer } from 'apollo-server-micro';
import { typeDefs } from '../../graphql/typeDefs';
import { resolvers } from '../../graphql/resolvers';
const apolloServer = new ApolloServer({
  typeDefs,
  resolvers,
});
export const config = {
  api: {
    bodyParser: false,
  },
};
export default apolloServer.createHandler({ path: '/api/graphql' });

このコードにより、GraphQL APIは/api/graphqlでアクセスできるようになります。

クエリでデータを取得

GraphQLを使用してデータを取得するために、Apollo Clientを使ってクエリを実行します。例として、ユーザーリストを取得するクエリを実装します。

import { useQuery, gql } from '@apollo/client';
const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;
export default function Home() {
  const { loading, error, data } = useQuery(GET_USERS);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <div>
      {data.users.map((user) => (
        <div key={user.id}>
          <h3>{user.name}</h3>
          <p>{user.email}</p>
        </div>
      ))}
    </div>
  );
}

このコードで、GraphQL APIからデータを取得して表示できます。

まとめ

Next.jsとGraphQLを組み合わせることで、効率的なデータフェッチとサーバーサイドレンダリングを実現できます。Apollo Clientを使ってクライアント側でデータを取得し、API Routesを使って独自のGraphQLサーバーを構築することで、強力なフルスタックアプリケーションを構築することが可能です。 GraphQLのクエリやミューテーション、Apolloのキャッシュ機能を駆使し、最適なパフォーマンスとユーザー体験を提供しましょう。