Nuxt.jsでHasuraのAPIをApollo ClientでCallするメモ

Hasura!✊Hasura!✊Hasura!✊(USA風に) Vueを使って開発する場合、GraphQL Vue チュートリアルを読んでおくと良いでしょう。 また、Hasuraを使用する場合、直接SQLを呼び出せるので、便利です。(変換もまとめたい)

はじめに

HasuraでGraphQLサーバを立てています。フロントエンドはNuxt.jsを使用しています。

GraphQL APIの呼び出しは、癖があり、なかなかコツを掴まないと難しいので、メモしておきます。Apollo Clientを使い、APIの呼び出しを行います。

環境

• Nuxt.js
• Hasura
• Vue Apollo
• @nuxtjs/apollo(内部でVue Apolloを使っています。)

GraphQLのメリット

• オーバーフェッチの回避
• 複数のAPI呼び出しを防ぐ
• API開発者とのコミュニケーションを削減
• 自己文書化

上記を意識した呼び出しを考えた方が恩恵を受けそうです。

基本の形

apolloプロパティで実行(SSR)

apollo: {
  user: {
    query: QUERY,
    variables: {
      id: 1,
    },
  },
},

asyncData()で実行(SSR)

apollo-module/test/fixture/pages/asyncData.vue

asyncData({ app }) {
  const client = app.apolloProvider.defaultClient
  client
    .query({
      query: QUERY,
      variables: {
        id: 1,
      },
    })
    .then((res) => {
      console.log(res)
    })
},

※variables()のように関数実行すると、gqlに引数が渡らないので注意！予め、変数を作っておきましょう！ (原因は分からず)loadingkeyが関係しているかも!

this.$apolloで実行(CSR)

this.$apollo.query({
  query: QUERY,
  variables: {
    id: 1,
  },
})
.then((res) => {
  console.log(res)
  this.user = res.data.user
})

ページネーション(limit,offset)

基本の形

query {
  users (
    limit: 10,
    offset: 10
  ) {
    id
    name
    created_at
    updated_at
  }
}

gqlファイルで取得する場合、users.gql(ファイル名は変更しても、特に影響ありません。)

query users($limit: Int, $offset: Int){
  users(
    limit: $limit,
    offset: $offset
  ) {
    id
    name
    created_at
    updated_at
  }
}

Paginate query results

Nuxt.jsで呼び出し

import users from "@/apollo/queries/users/users.gql"

export default {
  apollo: {
    $loadingKey: "loading",
    users: { // ここがdata()に追加される。
      prefetch: true, // これで this.$router.paramsなどが使用できる。
      query: users, // importしたqueryを指定する。
      variables: {
        limit: 10,
        offset: 10,
      },
    },
  },

totalCount

users_aggregateでtotalCountを取得できます。

query {
  users_aggregate {
    aggregate {
      totalCount: count
    }
  }
  users {
    id
    name
  }
}

Paginate query results

Aggregation queries(集約クエリ)

Aggregation queries

Filter query results / search queries(検索クエリ)

where

ソートクエリ(order)

Sort query results

良きなポイント

• edgesを使用しなくてもwhereで、1:mのどちらからでもクエリを取得できる。

インデックスを貼る

Query performance

Postgres indexes

Hasuraで60秒

全文検索

Full Text Search with Hasura GraphQL API and Postgres

参考

• Apollo Docs
• Nuxt.jsでGraphQLを扱う方法
• The Fullstack Tutorial for GraphQL
• Build a blog with Nuxt (Vue.js), Strapi and Apollo