前提
- prisma等でGraphQLサーバが立ち上がっていること
- Nuxt.jsアプリのセットアップも完了していること
事前準備
- 必要なライブラリのインストール
yarn add @nuxt/typescript-build
yarn add vue-property-decorator
yarn add @nuxtjs/apollo
- apolloクライアントの設定
nuxt.config.js
modules: [
'@nuxtjs/apollo'
],
apollo: {
clientConfigs: {
default: '~/plugins/apollo-auth.js'
}
},
plugins/apollo-auth.js
export default function (context) {
return {
httpEndpoint: '--- GraphQLサーバのエンドポイントURL ---'
}
}
実装
クエリ定義
apollo/queries/getUsers.gql
query GetUsers {
users {
id
name
description
}
}
呼び出し
pages/index.vue
<template>
<div>
<h3>Users</h3>
<ul>
<li v-for="user in users" :key="user.id">
<nuxt-link :to="`user/${user.id}`">
{{ user.name }} : {{ user.description }}
</nuxt-link>
</li>
</ul>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import getUsersGql from '~/apollo/queries/getUsers.gql';
@Component({})
export default class IndexPage extends Vue {
users: {
id: number;
name: string;
description: string;
}[];
get apollo () {
return {
users: {
query: getUsersGql,
prefetch: true
}
}
}
}
</script>
※ TypeScriptでapolloを呼び出す場合は、算出プロパティのように「getter付きのメソッド」で呼び出す必要がある
ちなみに、JavaScriptで同じこと書くとこのようになる (クリック)
<script>
import getUsersGql from '~/apollo/queries/getUsers.gql'
export default {
data() {
return {
users: []
}
},
apollo: {
users: {
query: getUsersGql
}
}
}
</script>
IntelliJ(WebStorm、PhpStorm等)がCannot find moduleエラーを吐く場合
ビルド時に上記のようなエラーを吐く場合
ERROR Failed to compile with 1 errors friendly-errors 19:02:49
This dependency was not found: friendly-errors 19:02:49
friendly-errors 19:02:49
* ~/apollo/queries/getUsers.gql in ./node_modules/babel-loader/lib??ref--12-0!./node_modules/ts-loader??ref--12-1!./node_modules/vue-loader/lib??vue-loader-options!./pages/area.vue?vue&type=script&lang=ts&
対処法
yarn add graphql
shims-gql.d.ts
declare module '*.gql' {
import Graphql from 'graphql'
export default Graphql
}
tsconfig.json
+ "files": [
+ "shims-gql.d.ts"
+ ],
+ "include": [
+ "apollo/queries/*.gql",
+ "apollo/queries/**/*.gql"
+ ],