nuxtjs/strapiでgraphqlのqueryを実行する

はじめに

• 　下記のページを参考に実装してみる

strapi.io

インストール

yarn add @nuxtjs/apollo graphql

設定

• nuxt.confg.jsファイルを下記のように記述する

   modules: [
    '@nuxtjs/apollo'
   ],
  apollo: {  
    clientConfigs: {
      default: {
        httpEndpoint: process.env.BACKEND_URL || "http://localhost:1337/graphql"
      }
    }

参照系クエリーの作成

• queries/addresses.gqlファイルを作成して下記のように記述する

query getAddresses($postCode: String!) {
  addresses(where: { post_code: $postCode }) {
    id
    post_code
    prefectures
    city_name
    town_name
  }
}

呼び出し

• pages/test.vueファイルに下記のように記述する

<template>
  <div>
    {{ addresses }}
    <hr>
    <input v-model="postCode">
    <hr>
    <button @click="hogehoge">
      検索
    </button>
  </div>
</template>

<script>
import addressesQuery from '@/queries/addresses'

export default {
  data () {
    return ({
      addresses: [],
      postCode: ''
    })
  },
  methods: {
    async hogehoge () {
      const addresses = await this.$apollo.queries.addresses.fetchMore({
        variables: {
          postCode: this.postCode
        },
        updateQuery: (previousResult, { fetchMoreResult }) => {
          if (fetchMoreResult.addresses.length > 0) {
            this.addresses = fetchMoreResult.addresses
          }
        }
      })
      console.log(addresses)
    }
  },
  apollo: {
    addresses: {
      query: addressesQuery,
      variables: {
        postCode: ''
      }
    }
  }
}
</script>

　実行結果

• http://localhost/testにアクセスして、郵便番号を入力し検索ボタンをクリックするとデータを取得することができる