この記事は最終更新日から1年以上が経過しています。

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

2021-02-04
2021-03-04

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

はじめに

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

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

環境

GraphQLのメリット

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

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

基本の形

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

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

asyncData()で実行(SSR)

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

js
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)

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

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

基本の形

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

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

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

Paginate query results

Nuxt.jsで呼び出し

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_aggregatetotalCountを取得できます。

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

Paginate query results

Aggregation queries(集約クエリ)

Aggregation 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

参考