【Next.js】GraphQLClientの使い方について

Next.js と GraphQL API を使用してデータを取得する際の GraphQLClient の使い方について説明します。GraphQLClient は、GraphQL クエリやミューテーションをサーバーやクライアントサイドで実行するために使用されます。ここでは、基本的なセットアップとクエリの実行方法を示します。

1. graphql-request ライブラリのインストール

まず、graphql-request ライブラリをプロジェクトにインストールします。このライブラリは、GraphQL クライアントの機能を提供します。

npm install graphql-request

2. GraphQLClient のインスタンスを作成

次に、GraphQLClient のインスタンスを作成します。これには GraphQL サーバーのエンドポイント URL が必要です。

import { GraphQLClient } from 'graphql-request';

const client = new GraphQLClient('あなたのGraphQLエンドポイントURL');

3. クエリの定義

GraphQL クエリを文字列として定義します。

const query = `
  query GetUserData($userId: String!) {
    user(id: $userId) {
      name
      email
    }
  }
`;

4. クエリの実行

クエリを実行し、データを取得します。この例では、userId という変数を使用しています。

async function fetchUserData(userId) {
  const variables = { userId };

  try {
    const data = await client.request(query, variables);
    return data.user;
  } catch (error) {
    console.error(error);
  }
}

5. クライアントサイドでの使用

Next.js のコンポーネント内で、上記の関数を使用してデータを取得できます。

import React, { useEffect, useState } from 'react';

const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUserData(userId).then(data => setUser(data));
  }, [userId]);

  if (!user) return <div>Loading...</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
};

6. サーバーサイドでの使用

Next.js では、getServerSideProps または getStaticProps でサーバーサイドでデータを取得することもできます。

export async function getServerSideProps(context) {
  const userId = context.params.userId;
  const user = await fetchUserData(userId);

  return {
    props: { user },
  };
}

これらのステップに従って、Next.js と GraphQL API を組み合わせて効率的にデータを取得することができます。また、エラーハンドリングやキャッシュ管理など、さらに高度な機能を実装することも可能です。

GraphQL API にアクセストークンを付与してリクエストを送る場合

GraphQL API にアクセストークンを付与してリクエストを送る場合、GraphQLClient のインスタンスを作成する際に、HTTPヘッダーにトークンを含める必要があります。以下は、graphql-request ライブラリを使用して、アクセストークンを含めたリクエストを送る方法です。

1. graphql-request ライブラリのインストール

まず、プロジェクトに graphql-request ライブラリをインストールします。

npm install graphql-request

2. GraphQLClient インスタンスの作成

GraphQLClient のインスタンスを作成し、ヘッダーに Authorization を含めます。この例では、YOUR_ACCESS_TOKEN を実際のアクセストークンに置き換えてください。

import { GraphQLClient } from 'graphql-request';

const client = new GraphQLClient('あなたのGraphQLエンドポイントURL', {
  headers: {
    authorization: `Bearer YOUR_ACCESS_TOKEN`,
  },
});

3. クエリの定義と実行

次に、GraphQL クエリを定義し、GraphQLClient インスタンスを使用してクエリを実行します。

const query = `あなたのGraphQLクエリ`;

async function fetchData() {
  try {
    const data = await client.request(query);
    return data;
  } catch (error) {
    console.error(error);
  }
}

4. トークンの動的設定

場合によっては、トークンが動的に変わることがあります。その場合、各リクエストでヘッダーを設定することができます。

async function fetchDataWithDynamicToken(token) {
  const dynamicClient = new GraphQLClient('あなたのGraphQLエンドポイントURL', {
    headers: {
      authorization: `Bearer ${token}`,
    },
  });

  try {
    const data = await dynamicClient.request(query);
    return data;
  } catch (error) {
    console.error(error);
  }
}

5. リフレッシュトークンの利用

リフレッシュトークンを使用してアクセストークンを更新する必要がある場合は、トークンの更新ロジックを実装し、必要に応じて新しいトークンで GraphQLClient インスタンスを更新する必要があります。

これらの方法を使用して、Next.js アプリケーションから GraphQL API への安全なリクエストを行うことができます。アクセストークンの取扱いにはセキュリティ上の注意が必要であるため、トークンの保存や管理には十分注意してください。