Vue.jsでGraphQLを活用した効率的なデータフェッチング

作成日 2025.08.08
Vue.js
Vue.js

Vue.jsとGraphQLを組み合わせることで、柔軟かつ効率的にデータを取得し、パフォーマンスを最適化できます。

1. GraphQLとは何か
2. Vue.jsでGraphQLを使用するメリット
3. Apollo Clientの導入
4. Apollo Clientの設定
5. GraphQLクエリの定義
6. VueコンポーネントでのGraphQLクエリの使用
7. リアクティブデータの取り扱い
8. 変数を使用したクエリ
9. ミューテーションの実装
10. サブスクリプションの活用
11. エラーハンドリング
12. キャッシュ戦略
13. データフェッチの最適化
14. Lazy Queryの使用
15. GraphQLサーバーとの認証
16. まとめ

GraphQLとは何か

GraphQLは、クライアントが必要なデータを明確に指定できるAPIクエリ言語です。

Vue.jsでGraphQLを使用するメリット

必要なデータのみ取得し、リクエスト回数を減らせるため、パフォーマンス向上が期待できます。

Apollo Clientの導入

Vue.jsでGraphQLを利用するにはApollo Clientが一般的です。

npm install @apollo/client graphql

Apollo Clientの設定

Apollo ClientをVueプロジェクトに統合します。

import { ApolloClient, InMemoryCache } from '@apollo/client';

const apolloClient = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com',
  cache: new InMemoryCache()
});

GraphQLクエリの定義

GraphQLクエリを定義してデータを取得します。

import { gql } from '@apollo/client';

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

VueコンポーネントでのGraphQLクエリの使用

GraphQLクエリをVueコンポーネント内で使用します。

<script setup>
import { useQuery } from '@vue/apollo-composable';

const { result, loading, error } = useQuery(GET_USERS);
</script>

リアクティブデータの取り扱い

取得したデータをリアクティブに扱います。

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <ul>
    <li v-for="user in result.users" :key="user.id">
      {{ user.name }} - {{ user.email }}
    </li>
  </ul>
</template>

変数を使用したクエリ

動的に変数を指定してデータを取得します。

const { result } = useQuery(GET_USERS, { id: 1 });

ミューテーションの実装

GraphQLミューテーションを使用してデータを更新します。

import { useMutation, gql } from '@vue/apollo-composable';

const ADD_USER = gql`
  mutation AddUser($name: String!, $email: String!) {
    addUser(name: $name, email: $email) {
      id
      name
      email
    }
  }
`;

const { mutate } = useMutation(ADD_USER);

function addUser() {
  mutate({ name: 'John Doe', email: 'john@example.com' });
}

サブスクリプションの活用

リアルタイムデータを取得します。

import { useSubscription, gql } from '@vue/apollo-composable';

const USER_ADDED = gql`
  subscription OnUserAdded {
    userAdded {
      id
      name
    }
  }
`;

const { result } = useSubscription(USER_ADDED);

エラーハンドリング

GraphQLクエリやミューテーションのエラーを処理します。

if (error) {
  console.error('GraphQL Error:', error.message);
}

キャッシュ戦略

Apollo Clientのキャッシュを効果的に管理します。

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        users: {
          merge(existing = [], incoming) {
            return [...existing, ...incoming];
          }
        }
      }
    }
  }
});

データフェッチの最適化

フェッチポリシーを設定し、効率的にデータを取得します。

useQuery(GET_USERS, { fetchPolicy: 'cache-and-network' });

Lazy Queryの使用

必要なタイミングでクエリを実行します。

const { load, result } = useLazyQuery(GET_USERS);
function fetchData() {
  load();
}

GraphQLサーバーとの認証

認証トークンをヘッダーに追加します。

const apolloClient = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com',
  headers: {
    authorization: 'Bearer your-token'
  },
  cache: new InMemoryCache()
});