[Advent Calendar 2021][Day8]Nuxt3とHasuraGraphQLをつなげる

はじめに

Advent Calendar 2021のDay8。

今回はNuxt3とHasuraGraphQLをつなげるよう実装していきます。

GraphQLクライアントを選定する

Nuxt3だと対応していないライブラリが多いようなので、Nuxt3で利用できるGraphQLクライアントを選定します。

  • apollo-client
  • graphql-request
    • シンプルなGraphQLクライアント
    • subscriptionには未対応
  • urql
    • シンプルなGraphQLクライアント
    • ドキュメントキャッシュというキャッシュ機構がある
    • GraphQL Code Generatorをサポートしている

urqlを使おうと思います。

Nuxt3でurqlを使っているGitHubのリポジトリが見つかったので、そちらを参考にさせていただきました。

参考

https://github.com/bicouy0/nuxt3-urql

実装する

  • package.json

nuxt3-urqlのpackage.jsonを参考に依存関係を記述します。

{
  "private": true,
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "start": "node .output/server/index.mjs",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^2.2.1",
    "@graphql-codegen/fragment-matcher": "^3.1.0",
    "@graphql-codegen/near-operation-file-preset": "^2.2.2",
    "@graphql-codegen/typed-document-node": "^2.2.1",
    "@graphql-codegen/typescript": "^2.4.1",
    "@graphql-codegen/typescript-apollo-client-helpers": "^2.1.8",
    "@graphql-codegen/typescript-operations": "^2.2.1",
    "@graphql-codegen/typescript-urql": "^3.4.1",
    "@graphql-codegen/typescript-urql-graphcache": "^2.2.2",
    "@graphql-codegen/typescript-vue-urql": "^2.2.1",
    "@graphql-codegen/urql-introspection": "^2.1.0",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@urql/exchange-graphcache": "^4.3.5",
    "@urql/vue": "^0.6.0",
    "eslint": "^8.3.0",
    "eslint-plugin-vue": "^8.1.1",
    "graphql-tag": "^2.12.6",
    "nuxt3": "^3.0.0-27307420.6a25d3e",
    "typescript": "^4.5.2",
    "water.css": "^2.1.1"
  },
  "dependencies": {
    "graphql": "^16.0.1"
  }
}
  • codegen.yml

こちらもnuxt3-urqlを参考につくります。schemaは、HasuraGraphQLのエンドポイントを指定します。

schema: http://localhost:8080/v1/graphql
documents: ./gql/**/*.graphql

generates:
  gql/schema.ts:
    plugins:
      - typescript
  gql/:
    preset: near-operation-file
    presetConfig:
      baseTypesPath: schema.ts
      extension: .ts
    plugins:
      - typescript-operations
      - typed-document-node
  • gql/queris/calendar.graphql

HasuraGraphQLを使って適当なクエリを作成します。

query MyQuery {
  calendars {
    id
    name
    participants {
      article_title
      article_url
      calendar_id
      created_at
      day
      uid
      updated_at
    }
  }
}
  • plugins/urql.ts

後ほど解説します。

import { createClient, ssrExchange, dedupExchange, fetchExchange, Client } from '@urql/core';
import { defineNuxtPlugin } from '#app'
import { ref } from "vue";

const ssrKey = '__URQL_DATA__'

export default defineNuxtPlugin(nuxt => {
    const { vueApp } = nuxt

    const ssr = ssrExchange({
        isClient: process.client
    })

    if (process.client) {
        nuxt.hook('app:created', () => {
            ssr.restoreData(nuxt.payload[ssrKey])
        })
    }

    if (process.server) {
        nuxt.hook('app:rendered', () => {
            nuxt.payload[ssrKey] = ssr.extractData()
        })
    }


    const client = createClient({
        url: 'http://localhost:8080/v1/graphql',
        exchanges: [
            dedupExchange,
            ssr,
            fetchExchange,
        ]
    })

    nuxt.provide('urql', client)
    vueApp.provide('$urql', ref(client))

})

declare module '#app' {
    interface NuxtApp {
        $urql: Client
    }
}
  • app.vue

NuxtWelcomeをNuxtPageに変更しましょう

<template>
  <div>
    <NuxtPage />
  </div>
</template>
  • pages/index.vue

とりあえずGrahpQLクエリを試すだけの実装です。

<template>
    <section>
        <div v-if="data">
            <table v-if="data.calendars.length">
                <tbody>
                    <tr v-for="c in data.calendars" :key="c.id">
                        <td>{{ c.name }}</td>
                    </tr>
                </tbody>
            </table>
            <div v-else>
                <em>no results</em>
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import { MyQueryDocument } from "~/gql/queries/calendar";
import { useClientHandle } from "@urql/vue";
const urql = useClientHandle();
const { data, fetching } = await urql.useQuery({ query: MyQueryDocument })

</script>

とりあえず、Hasuraとつなげることに集中して、諸々、GraphQLエンドポイントをハードコードしている部分などは、別途リファクタして改善していきたいと思います。

理解する

Nuxt3のPlugin機構がNuxt2から異なっているので、確認していきましょう。

Nuxt3 plugin

defineNuxtPlugin を使って、nuxtAppにプラグインを追加することができます。

参考

https://v3.nuxtjs.org/docs/directory-structure/plugins/

NuxtApp

nuxtApp.provideで各コンポーネントでnuxtAppを通じてアクセスできるようになっています。

参考

https://v3.nuxtjs.org/docs/usage/nuxt-app/

urql Server-side Rendering

SSR Exchangeという機能を利用してServer側でレンダリングされたときの、GraphQLクエリ結果をクライアント側で取り出すことができるようです。

  • サーバー側ではapp:renderedでデータ抽出
  • クライアント側ではapp:createdでデータ復元

参考

https://formidable.com/open-source/urql/docs/advanced/server-side-rendering/#vue-suspense

urql vue useClientHandle

useClientHandleを使ってpluginで定義したurqlクライアントを取得できます。

参考

https://formidable.com/open-source/urql/docs/api/vue/#useclienthandle

まとめ

Nuxt3は、まだ静的サイトの対応が実装されていないので今回はSSRで作っていくことにしました。 SSRでpluginの機構がどのように動くかは、少し複雑で考えることが多いですね。 個人的には、要件次第ですが、静的サイトにしてJAM Stackのほうがシンプルで好みです。SSRを使うとしたら動的にレンダリングするような、サイトを構築する場合ですね。

次回は、CloudSQLでPostgreSQLデータベースをたてて、クラウドにデプロイできるよう準備をしていきます。