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

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

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

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

```bash
npm install graphql-request
```

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

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

```javascript
import { GraphQLClient } from 'graphql-request';

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

### 3. クエリの定義

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

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

### 4. クエリの実行

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

```javascript
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 のコンポーネント内で、上記の関数を使用してデータを取得できます。

```javascript
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` でサーバーサイドでデータを取得することもできます。

```javascript
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` ライブラリをインストールします。

```bash
npm install graphql-request
```

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

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

```javascript
import { GraphQLClient } from 'graphql-request';

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

```

### 3. クエリの定義と実行

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

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

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

### 4. トークンの動的設定

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

```javascript
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 への安全なリクエストを行うことができます。アクセストークンの取扱いにはセキュリティ上の注意が必要であるため、トークンの保存や管理には十分注意してください。