Vue 3 + vue-apollo 4 で GraphQL query を行う（Github の API を利用してリポジトリの取得/追加読み込みを行う）

yarn add graphql graphql-tag @apollo/client

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

// HTTP connection to the API
const httpLink = createHttpLink({
  uri: 'https://api.github.com/graphql',
  fetch: (uri: RequestInfo, options: RequestInit) => {
    const headers = {
        Authorization: 'Bearer <Github Token>'
    };
    options.headers = headers
    return fetch(uri, options);
  },

})

// Cache implementation
const cache = new InMemoryCache()

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})

export default apolloClient

// Comosition API
yarn add @vue/apollo-composable

import { createApp, provide, h } from "vue";
import { DefaultApolloClient } from "@vue/apollo-composable";

import apolloClient from "./plugins/apolloclient";

import "./style.css";
import App from "./App.vue";

createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient);
  },

  render: () => h(App),
}).mount("#app");

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloGraphQL />
</template>

<script setup lang="ts">
import HelloGraphQL from "./components/HelloGraphQL.vue";
</script>

<template>
  <div v-if="result">
    <table :border="1" style="border-collapse: collapse">
      <thead>
        <tr>
          <th>No</th>
          <th>name</th>
          <th>description</th>
          <th>createdAt</th>
          <th>star</th>
          <th>url</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(v, index) in result.organization.repositories.nodes"
          :key="v.url"
        >
          <td>{{ index + 1 }}</td>
          <td>{{ v.name }}</td>
          <td>{{ v.description }}</td>
          <td>{{ new Date(v.createdAt).toLocaleDateString() }}</td>
          <td>{{ v.stargazers.totalCount }}</td>
          <td>{{ v.url }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { useQuery } from "@vue/apollo-composable";
import gql from "graphql-tag";

const { result } = useQuery(gql`
  query {
    organization(login: "vuejs") {
      repositories(first: 50, orderBy: { field: STARGAZERS, direction: DESC }) {
        nodes {
          name
          description
          createdAt
          updatedAt
          url
          stargazers {
            totalCount
          }
        }
      }
    }
  }
`);
</script>

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else-if="result">
  .... 以降は同じため省略
</template>

<script setup lang="ts">
import { useQuery } from "@vue/apollo-composable";
import gql from "graphql-tag";

const { result, loading, error } = useQuery(gql`
  query {
    organization(login: "vuejs") {
      repositories(first: 101, orderBy: { field: STARGAZERS, direction: DESC })
    ... 以降は同じため省略
  }
`);
</script>

<template> 
  <select @change="(v) => (variables.login = v.target.value)">
    <option>vuejs</option>
    <option>facebook</option>
    <option>angular</option>
  </select>
  ... 以降は同じ
</template>

<script setup lang="ts">
import { useQuery } from "@vue/apollo-composable";
import gql from "graphql-tag";
import { ref } from "vue";

const variables = ref({
  login: "vuejs",
});

const { result, loading, error } = useQuery(
  gql`
    query ($login: String!) {
      organization(login: $login) {
        ... ここは同じ
      }
    }
  `,
  variables
);
</script>

<template>
  ...ここまで変更なし
    <button @click="loadNext()">追加読み込み</button>
  </div>
</template>

<script setup lang="ts">
import { useQuery } from "@vue/apollo-composable";
import gql from "graphql-tag";
import { ref } from "vue";

// パラメータに cursor を指定します。最初は先頭からなので null にします。
const variables = ref({
  login: "vuejs",
  cursor: null,
});

// 追加読み込み処理を行うために fetchMore を参照できるようにします。
const { result, loading, error, fetchMore } = useQuery(
  gql`
    // 上の cursor をクエリに指定します。指定した cursor から 50件を取得する動きになります。
    query ($login: String!, $cursor: String) {
      organization(login: $login) {
        repositories(
          first: 50
          after: $cursor
          orderBy: { field: STARGAZERS, direction: DESC }
        ) {
          nodes {
            name
            description
            createdAt
            updatedAt
            url
            stargazers {
              totalCount
            }
          }
  // ページ情報を取得します
          pageInfo {
            endCursor
            hasNextPage
          }
        }
      }
    }
  `,
  variables
);

// ボタン押下時の処理です
const loadNext = () => {
　// 追加取得をします。variables に指定するのは cursor などページ情報のみでOKです。
  // 再度 login を指定する必要はありません。 
  fetchMore({
    variables: {
      cursor: result.value.organization.repositories.pageInfo.endCursor,
    },

    // 取得後のコールバック処理です
    // 追加取得前の結果と、今回取得したデータが引き数にあります
    updateQuery: (previoiusResult, { fetchMoreResult }) => {
      const { nodes: newNodes, pageInfo: newPageInfo } =
        fetchMoreResult.organization.repositories;
      
      // キャッシュを更新した結果を返します。上のクエリに記載はありませんが、
      // __typename なども含むようにマージしないとエラーになります。
      // やっていることは、追加読み込みの一覧を付け足し、pageInfo は最新のものに置き換えをしています
      return {
        organization: {
          ...previoiusResult.organization,
          repositories: {
            ...previoiusResult.organization.repositories,
            nodes: [
              ...previoiusResult.organization.repositories.nodes,
              ...newNodes,
            ],
            pageInfo: newPageInfo,
          },
        },
      };
    },
  });
};
</script>

onResult((queryResult) => {
  console.log("データ取得しました");
  console.log(queryResult); // 取得できたデータが参照できます
});
onError((queryResult) => {
  console.log("取得エラーです");
  console.log(queryResult); // エラー情報が参照できます
});