この記事の概要

Vue3でTypeScriptを使いGraphQLを試してみた

Vue3対応
Vue Apollo v3（vue3に正式対応しているのはv4から開発中）
GraphQLを実行するまでのサンプル解説

GraphQLについて

APIのためのクエリー言語であり、既存のデータを使ってクエリーを実行するためのランタイム。

クライアントからサーバーのデータを取得する場合REST APIが主な手段だった
REST APIとの比較については以下記事をお勧めする

サンプル

目次

GraphCMSで簡易サーバー作成
Vue3にVue Apolloの環境を作成
VueからGraphQL を実行（GET）
※ POST、PUT、DELETEのサンプルはGitへ

【1】GraphCMSで簡易サーバー作成

GraphCMSはGraphQLでレスポンスを返してくれるCMS
これを使用してDBサーバを作成する

アカウントとプロジェクトの作成
Modelの作成
Fieldの作成
データの追加
Tokenの作成と権限の追加
Content API URLの取得

[1-1] アカウントとプロジェクトの作成

Create a new project 設定
- Template: Blank
- Project name: test-project
- Project description: なし
- Select region: Japan
- Plan: Free forever
- Members: -
  - 自分以外にメンバーを追加したい場合のみ設定

[1-2] Modelの作成

Schema > MODELS > Add
Create Model 設定
- Display name: Task
- API ID: Task
- Plural API ID: Tasks
- Discription: なし

[1-3] Fieldの作成

FieldのTypeを選択する
- MODELS > task > Add Fields > [Type選択]
Create Field 設定1
- Type: Single line text
- Display name: title
- API ID title
Create Field 設定2
- Type: Multi line text
- Display name: discription
- API ID discription
Create Field 設定3
- Type: Boolean
- Display name: task_status
- API ID task_status

[1-4] データの追加

Content > DEFAULT VIEWS > [Model Name(Workflow)] > Create Entry

[1-5] Tokenの作成と権限の追加

Project Settings > API Access　ページでTokenを作成
Project Settings > API Access > Permanent Auth Tokens > Create token

作成したTokenに権限を設定する

権限を与えるModelを作成したTaskにして追加

[1-6] Content API URLの取得

Content API URL
- Project Settings > API Access > Endpoints > Content API

【2】Vue3 プロジェクトの作成と設定

Vue3プロジェクトの作成
vue-routerの設定
vue-apolloの設定
eslintの設定

[2-1] Vue3プロジェクトの作成

# yarn create vite <プロジェクト名> --template vue-ts    
yarn create vite vite_ts --template vue-ts 

cd <プロジェクト名>
yarn
yarn dev

作業しやすいようにポートとエイリアスを設定しておく

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8888,
  },
  resolve: {
    alias: {
      "~/": `${__dirname}/src/`,
    },
  },
});

tsconfig.jsonにもpathの設定を追加

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "baseUrl": "./src",
    "paths": {
      "~/*": [
        "./*"
      ]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

[2-2] vue-routerの設定

yarn add vue-router@4

以下のファイルを作成

src/App.vue（router-view部分がpageごとに切り替わる）

<template>
  <router-view />
</template>
<style>
table{
  width: 100%;
  border-spacing: 0;
}

table th{
  border-bottom: solid 2px #ccc;
  padding: 10px 0;
}

table td{
  border-bottom: solid 1px #ddd;
  text-align: center;
  padding: 5px 0;
}

input[type="text"] {
  width: 100%;
}

textarea {
  width: 100%;
}

button {
    display: inline-block;
    width: 100%;
    max-width: 100px;
    margin: auto;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    background-color: #269dff;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    border: 2px solid transparent;
}
button:hover {
  opacity: 0.5;
}
button.small {
  padding: 2px 4px;
  font-size: 10px;
}
button:disabled {
  background-color: #bababa;
  cursor: default;
  opacity: 1;
}
button.outlined:not(:disabled) {
  background-color: #fff;
  border: 1px solid #fb4444;
  color: #fb4444;
}
button.delete:not(:disabled) {
  background-color: #fb4444;
}
button.complete:not(:disabled) {
  background-color: #00b209;
}
</style>

src/router.ts（[2-3] vue-apolloの設定時に main.tsで読み込む）

import { createRouter, createWebHistory } from "vue-router";
import Home from "./pages/index.vue";
import getPage from "./pages/get.vue";

const routes = [
  { path: "/", name: "home", component: Home },
  { path: "/get", name: "get", component: getPage },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

[2-3] vue-apolloの設定

追加 plugin
- "@vue/apollo-option": "^4.0.0-alpha.20"
- "vue-apollo": "^3.1.0"
- "graphql-tag": "^2.12.6"
- "vue-cli-plugin-apollo": "^0.22.2"

yarn add -D graphql-tag vue-cli-plugin-apollo vue-apollo @vue/apollo-option

.env.localに「TokensとContent API URLの取得」で控えた情報を設定

VITE_GRAPHQL_AUTH_TOKEN=[あなたのTOKEN]
VITE_GRAPHQL_HTTP=[あなたのAPI ENDPOINT]

main.ts
- vue-apolloの設定コードを追加
- vue-routerを読み込み

import "./style.css";
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client/core";
import { createApolloProvider } from "@vue/apollo-option";
import { createApp } from "vue";

import router from "./router";
import App from "./App.vue";

const AUTH_TOKEN = import.meta.env.VITE_GRAPHQL_AUTH_TOKEN || "";
const httpEndpoint =
  import.meta.env.VITE_GRAPHQL_HTTP || "http://localhost:4000/graphql";
const httpLink = new HttpLink({
  uri: httpEndpoint,
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${AUTH_TOKEN}`,
  },
});

/**
 * Create the Apollo client
 */
const cache = new InMemoryCache();
const apolloClient = new ApolloClient({
  cache,
  link: httpLink,
});

/**
 * Create the Apollo provider
 */
const apolloProvider = createApolloProvider({
  defaultClient: apolloClient,
});

/**
 * Add the provider to your app
 */
const app = createApp(App);
app.use(router);
app.use(apolloProvider);

app.mount("#app");

[2-3] eslintの設定

追加 plugin
- "eslint": "^8.21.0"
- "eslint-plugin-vue": "^9.3.0"
- "@vue/eslint-config-typescript": "^11.0.0"
- "@typescript-eslint/eslint-plugin": "^5.32.0"
- "@typescript-eslint/parser": "^5.32.0"

yarn add -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

eslintの設定ファイル(.eslintrc.yml)を追加

touch .eslintrc.yml

.eslintrc.yml

env:
  browser: true
  es2021: true
extends:
  - 'plugin:vue/vue3-recommended'
  - 'eslint:recommended'
  - '@vue/typescript/recommended'
parser: 'vue-eslint-parser'
parserOptions:
  parser: '@typescript-eslint/parser'
  ecmaVersion: 12
plugins:
  - vue
  - '@typescript-eslint'

Vscodeの拡張機能でVeturを利用してる場合

vue3から利用できる<script setup lang="ts">にVeturは未対応（2022.08.07)
以下手順で拡張機能を変更する

Veturを利用するワークスペースでだけ無効化
- Disable(Workspace)
Vue Language Features (Volar)を追加

【3】VueからGraphQLを実行（GET）

設定が終わったので実際に動かしてみる

GraphQL文を書く（GET ワークフローの全ての情報を取得)
Vue Apolloで実行する

[3-1] GraphQL文を書く（GET)

src/constants/task.ts

export const ALL_WORKFLOWS = gql`
query allWorkflows {
    workflows(orderBy: id_ASC) {
      id
      title
      description
      createdAt
    }
  }
`;

titleとdescriptionは自分で設定した項目
idとcreatedAtはpost時に自動で追加される項目

query allWorkflows
「allWorkflows」は好きな名称でよい
このQL文はワークフローの全ての情報を取得するためのものなので「allWorkflows」とした

workflows(orderBy: id_ASC) {
「workflows」はModel名の複数形にすることで「複数データの取得」となる
「orderBy: 項目名_昇順・降順」でソート順を決められる
「id_ASC」はidの昇順、「createdAt_DESC」なら作成した日時順で降順となる

[3-2] Vue Apolloで実行する

apolloの設定はすでにしてあるので
Vueでアポロを使って先ほど作成したQL文章を渡して実行する

src/pages/get.vue

<template>
  <div>
    <table>
      <tr>
        <th width="200">
          ID
        </th>
        <th width="200">
          TITLE
        </th>
        <th width="300">
          DESCRIPTION
        </th>
        <th width="100">
          STATUS
        </th>
      </tr>
      <tr
        v-for="task in tasks"
        :key="task.id"
      >
        <td>{{ task.id }}</td>
        <td>{{ task.title }}</td>
        <td>{{ task.description }}</td>
        <td>{{ task.task_status }}</td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import {
  ALL_TASKS,
} from '~/constants/task';

interface task {
  id: string,
  title: string
  description: string
  task_status: boolean
}

interface Data {
  tasks: task[],
}

export default defineComponent({
  name: 'TodoList',
  data(): Data {
    return {
      tasks: [],
    };
  },
  apollo: {
    tasks: ALL_TASKS,
  },
});
</script>

これを実行する

yarn dev

以下のように表示される。
データの取得が行えた。

以上