## 前提条件

- NuxtJS
- Hasura
- Firebase
- GraphQL & Apollo Client

上記の使い方をある程度わかっていること

## ステップ1 Hasuraの環境変数の設定

- `HASURA_GRAPHQL_ADMIN_SECRET`を設定します。こちらは任意の値ですが、忘れないようにメモしておきましょう。こちらを設定すると、リクエストを投げても、下記エラーが発生するようになります。

```bash
GraphQL error: x-hasura-admin-secret/x-hasura-access-key required, but not found
```

- `HASURA_GRAPHQL_JWT_SECRET`の登録します。(FirebaseのプロジェクトIDが必要です。)

```json
{
    "type":"RS256",
    "jwk_url": "https://www.googleapis.com/service_accounts/v1/jwk/securetoken@system.gserviceaccount.com",
    "audience": "<firebase-project-id>",
    "issuer": "https://securetoken.google.com/<firebase-project-id>"
}
```

- `HASURA_GRAPHQL_UNAUTHORIZED_ROLE`を設定します。値は、`anonymous`にしておきましょう。この値は、認証していないユーザーのデータアクセス権限を設定する為です。

上記を設定した後に、Hasuraプロジェクトのコンソールに入り、data→permissionで詳細な権限を設定します。認証していないユーザーでもアクセスできるデータは、permissionを許可します。

![Hasura Firebase](//images.ctfassets.net/0jyj5pjwic68/16lZMdkrir7SiZRwaEBXmz/b5eab0b80a76d95bef553f430bb86fc4/____________________________2021-02-14_1.11.51.png)

権限がない場合は、下記のエラーがスローされます。(例えばUserモデルへのmutation)

```bash
[GraphQL error]: Message: field "update_users_by_pk" not found in type: 'mutation_root', Location: undefined, Path: undefined
```

なので、Headersに`X-Hasura-Role`に`admin`や`anonymous`を入れる必要があります。
また、`X-Hasura-Admin-Secret`を入れておくと、実行が管理者権限になります。

- [Hasura Authentication Explained](https://hasura.io/blog/hasura-authentication-explained/)
- [Access control basics](https://hasura.io/docs/1.0/graphql/core/auth/authorization/basics.html)
- [how set custom headers #176](https://github.com/nuxt-community/apollo-module/issues/176)

## 参考
- [A tutorial for using Firebase to add authentication and authorization to a realtime Hasura app](https://hasura.io/blog/authentication-and-authorization-using-hasura-and-firebase/)
- [Firebaseを利用して、リアルタイムHasuraアプリに認証と承認を追加するチュートリアル](https://www.graat.co.jp/blogs/cjwstb63d0daz0830mzctngvk)

Hasura

Hasura×Firebase Authで認証を作る

<h2>前提条件</h2>
<ul>
<li>NuxtJS</li>
<li>Hasura</li>
<li>Firebase</li>
<li>GraphQL &#x26; Apollo Client</li>
</ul>
<p>上記の使...

## Hasuraとは？

[Hasura](https://hasura.io/)はデータベースにアクセスするためのGraphQL APIを生成するオープンソースエンジンです。
PostgresやMySQLに対応しています。私は、サーバレスアーキテクチャやJAMStackでアプリやWebサイトを構築することが多いので、NoSQLではなく、RDBを簡単に使用できることはめちゃめちゃアイデアが広がります！(GraphQL APIまでついてくる🚀)

Hasuraの導入事例([User Stories](https://hasura.io/user-stories/))も一読しておくと良いでしょう。

## Hasuraの料金

[料金](https://hasura.io/pricing/)

![Hasura料金](//images.ctfassets.net/0jyj5pjwic68/66aSMEh14DEJhJ8Bx25DTU/aa8fa4f5155cfc478213faa5d4dd64b9/____________________________2021-01-29_13.43.15.png)

### フリー

- 1GB/月のデータ送信
- 60分のリクエスト

### スタンダード(99ドル)

- 20GB/月のデータ送信
- 無制限のリクエスト
- 高可用性
- 追加GBあたり2ドル

## とにかくHasuraをデプロイしてみる

[Hasura のデプロイ](https://hasura.io/learn/ja/graphql/hasura/setup/)を参考して、Hasuraのデプロイをしてみました。Herokuのアカウントがある場合は、HerokuからPostgresを立ち上げて、Hasuraエンジンをデプロイします。自分はこれを最初に実行しました。

## リレーションシップの作成

[リレーションシップの作成](https://hasura.io/learn/ja/graphql/hasura/relationships/2-create-relationship/)

### ステップ1 Foreign Keysの設定

![Hasura Relation](//images.ctfassets.net/0jyj5pjwic68/7jXqkk5ibLlW9QWSs3lDZy/380841414699114b1429ffea0129d9b0/____________________________2021-01-29_19.12.30.png)

### ステップ2 Table Relationshipsの設定

![Hasura Relations](//images.ctfassets.net/0jyj5pjwic68/586GNqglis9DxBLYND05TM/ed1293da05da96add9a8a86145890ded/____________________________2021-01-29_19.18.40.png)

上記の２つを設定すると、

```js
query {
  users {
    id
    role {
      id
      name
    }
  }
}
```

みたいな形で、テーブルを参照できました。

## cliインストール

[HasuraCLIのインストール](https://hasura.io/docs/1.0/graphql/core/hasura-cli/install-hasura-cli.html#install-hasura-cli)

```bash
curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
```

必須ではないかも。cliをインストールしたまま何もしていません。

## Hasuraチュートリアル

[Course Introduction](https://hasura.io/learn/graphql/hasura/introduction/)

[Getting Started with Hasura Cloud](https://hasura.io/docs/1.0/graphql/cloud/getting-started/index.html#cloud-getting-started): Corsなどenvの設定

## 参考
- [techcrunch.com Hasura](https://jp.techcrunch.com/tag/hasura/)
- [GraphQLサービスを提供するHasuraが約26.5億円を調達、MySQLを新たにサポート](https://jp.techcrunch.com/2020/09/10/2020-09-08-hasura-raises-25-million-series-b-and-adds-mysql-support-to-its-graphql-service/)
- [Hasura Blog](https://hasura.io/blog/)
- [Hasura認証の説明](https://hasura.io/blog/hasura-authentication-explained/)

個人開発でHasuraを使ってみる

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

## はじめに

[Hasura](https://hasura.io/)でGraphQLサーバを立てています。フロントエンドは[Nuxt.js](https://ja.nuxtjs.org/)を使用しています。

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

### 環境

- [Nuxt.js](https://ja.nuxtjs.org/)
- [Hasura](https://hasura.io/)
- [Vue Apollo](https://apollo.vuejs.org/)
- [@nuxtjs/apollo](https://github.com/nuxt-community/apollo-module)(内部でVue Apolloを使っています。)

### GraphQLのメリット

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

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

## 基本の形

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

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

### asyncData()で実行(SSR)

[apollo-module/test/fixture/pages/asyncData.vue](https://github.com/nuxt-community/apollo-module/blob/master/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](https://hasura.io/docs/1.0/graphql/core/queries/pagination.html)

### 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_aggregate`で`totalCount`を取得できます。

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

[Paginate query results](https://hasura.io/docs/1.0/graphql/core/queries/pagination.html#fetch-limited-results-along-with-data-aggregated-over-all-results-e-g-total-count-in-the-same-query)

## Aggregation queries(集約クエリ)

[Aggregation queries](https://hasura.io/docs/1.0/graphql/core/queries/aggregation-queries.html)

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

## where

## ソートクエリ(order)

[Sort query results](https://hasura.io/docs/1.0/graphql/core/queries/sorting.html)

## 良きなポイント

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

## インデックスを貼る

[Query performance](https://hasura.io/docs/1.0/graphql/core/queries/performance.html#data-validation-pg-indexes)

[Postgres indexes](https://hasura.io/docs/1.0/graphql/core/guides/postgres/indexes.html)

## Hasuraで60秒

## 全文検索

[Full Text Search with Hasura GraphQL API and Postgres](https://hasura.io/blog/full-text-search-with-hasura-graphql-api-postgres/)

## 参考

- [Apollo Docs](https://www.apollographql.com/docs/)
- [Nuxt.jsでGraphQLを扱う方法](https://qiita.com/takanorip/items/d1e8618800d951780f4b)
- [The Fullstack Tutorial for GraphQL](https://www.howtographql.com/)
- [Build a blog with Nuxt (Vue.js), Strapi and Apollo](https://strapi.io/blog/build-a-blog-using-nuxt-strapi-and-apollo)

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

## はじめに

[Hasura](https://hasura.io/)で[Heroku Postgres](https://elements.heroku.com/addons/heroku-postgresql)を使用していたら、もうすぐレコード制限(Hobby Freeだと1万レコードまで)にかかるというメールが来たので、Heroku Postgresの[add-on](https://jp.heroku.com/elements/addons)をグレードアップする。ちなみにHasuraは、初期にHerokuデプロイでスタートしています。

## ステップ1 Heroku addonsの作成

DB以外使用していないので、`--app {アプリ名}`は基本的に全てのコマンドにつける。

下記のコマンドでも作成できますが、ブラウザからでも作成することができます。ちなみに自分は、Hobby Basic(9$/月)をブラウザから作成しました。(Hobby Basicだと1千万レコードまで登録できます。)詳細な料金は[Heroku 料金](https://jp.heroku.com/pricing)から確認できます。

```bash
heroku maintenance:on --app {アプリ名} # メンテナンスモード オン
heroku addons:create heroku-postgresql:standard-0 --app {アプリ名}
```

**※standard-0プランは、月50$です。**

## ステップ2 HerokuのDBをコピー

`DATABASE_URL`と`HEROKU_POSTGRESQL_COLOR_URL`は、Herokuの環境変数を確認してください。`HEROKU_POSTGRESQL_COLOR_URL`は、`HEROKU_POSTGRESQL_RED_URL`だったりします。カラーURLは新しく作成したDB(addon)のURLだと思われます。

```bash
heroku pg:copy {DATABASE_URL} {HEROKU_POSTGRESQL_COLOR_URL} --app {アプリ名}
heroku maintenance:off --app {アプリ名} # メンテナンスモード オフ
```

上記でDBのコピーが完了します。

## ステップ3 HasuraのDBのURLを変更

Hasuraのダッシュボードから、データベースのURLを変更します。
`DATABASE_URL`になっていると思うので、`HEROKU_POSTGRESQL_COLOR_URL`に変更します。変更すると、Hasuraが読み込んでくれるので、今まで通り使用することができます。

![Hasura Heroku](//images.ctfassets.net/0jyj5pjwic68/7b6gzg90g7jZxxKudilmfg/4bcaddd17f28cc1fa6bf89e0ba3784ff/image.png)

## 参考

- [Upgrading with pg:copy](https://devcenter.heroku.com/articles/upgrading-heroku-postgres-databases?c=&utm_campaign=postgreslimits&utm_medium=telex&utm_source=nurture&utm_content=devcenter&utm_term=upgrade#upgrading-with-pg-copy)

Hsauraで使用していたHeroku Postgresの制限が来たのでプランをアップグレードする

全体像

[Securing the GraphQL endpoint](https://hasura.io/docs/1.0/graphql/core/deployment/securing-graphql-endpoint.html)

Hasura Cloudのセキュリティ設定

[Securing projects](https://hasura.io/docs/1.0/graphql/cloud/projects/secure.html#secure-project)

Hasura×Firebase Authで認証を作る

前提条件

ステップ1 Hasuraの環境変数の設定

参考

Related

Tags

Share

Table of Contents