search

aokabin / nuxt-apollo-pockemon

0 stars 0 forks source link

Apollo Clientを導入してPockemon GraphQLを叩いてみる #1

Open aokabin opened 4 years ago

aokabin commented 4 years ago

lucasbento/graphql-pokemon: Get information of a Pokémon with GraphQL!

ポケモン情報を取得できるGraphQLを使って、データを取得しつつ、Apollo Clientを使って高速にデータをストアする

aokabin commented 4 years ago

ちょっとわかんないけど、この辺をベースに色々試してみる

aokabin commented 4 years ago

こっちのほうがいいかな

$ yarn add @nuxtjs/apollo
aokabin commented 4 years ago

nuxt.config.js の設定、これが最小限感？

  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://graphql.datocms.com',
      },
    }
  },
aokabin commented 4 years ago 
<template>
  <table>
    <tr>
      <th>ID</th>
      <th>名前</th>
    </tr>
    <tr v-for="pockemon in pockemons" :key="pockemon.id">
      <td>{{ pockemon.id }}</td>
      <td>{{ pockemon.name }}</td>
    </tr>
  </table>
</template>

<script>
import getPockemonsGql from '~/apollo/queries/getPockemons.graphql'

export default {
  data() {
    return {
      pockemons: []
    }
  },

  apollo: {
    pockemons: {
      query: getPockemonsGql
    }
  }
}
</script>

こんなのを書いた

query GetPockemons {
  pokemons(first: 1) {
    id
    name
  }
}

これも

でも動かず

image

らしい

aokabin commented 4 years ago

pockemonだと思ってたけど、pokemonなの！！！

typoでした、動いた

image

aokabin commented 4 years ago

確かに使うのは簡単だな...

aokabin commented 4 years ago

こういうの使わないといけないのかな？

aokabin commented 4 years ago

pluginsあたりで、apollo clientを宣言してあげて、それを機軸に使い回す、みたいな感じになるイメージかな？

aokabin commented 4 years ago

一応fetchPolicyあるなぁ

aokabin commented 4 years ago

これcacheされてるんかな？

ちょっと書き出して、サーバーサイドなくしたときどうなるかみてみよう

固定データだ、毎回リクエストしているわけじゃないかも

aokabin commented 4 years ago

あー、ちょっと何かが変わってきてる気がする、よくわかってなかったってことだ

ちょっと整理しよう

aokabin commented 4 years ago

つまり、静的ファイルを生成するんだったらGridsomeを使ったほうがいいと

まぁ普通のサービスでもnuxt.js使うと思うので、nuxt使うとして

キャッシュするどうこうは、サボさんが見せてくれた方法でいけそう

キャッシュ機構をpluginsで設定しつつ

import gql from 'graphql-tag'
import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'
import introspectionQueryResultData from '~/apollo/fragmentTypes.json'

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData
})

export default function(ctx) {
  return {
    httpEndpoint: `${process.env.GRAPHQL_HTTP_ENDPOINT}/graphql?code=${process.env.GRAPHQL_HTTP_ENDPOINT_KEY}`,
    browserHttpEndpoint: '/graphql',
    resolvers: {},
    inMemoryCacheOptions: {
      fragmentMatcher,
      cacheRedirects: {
        Query: {
          shop: (_, args, { getCacheKey }) => {
            return getCacheKey({ _typename: 'Shop', id: args.id })
          },
          dailyReport: (_, args, { getCacheKey }) => {
            return getCacheKey({ __typename: 'Calendar', id: args.id })
          }
        }
      }
    }
  }
}

apolloのpluginsに追加する形

apollo: {
  clientConfigs: {
    default: '~/plugins/apollo-client-config.js'
  }
}
aokabin commented 4 years ago

@client ディレクティブ、これはクライアント内でquery発行できるやつらしい

データを取得するてきな

aokabin commented 4 years ago

これやっております

https://github.com/CODEBASE-Okinawa/codebase-tech-training/issues/12

aokabin commented 4 years ago

Gridsome+WPだと、gridsome developすることで、開発中のWP見れるかも？ WPのデータアップデートしたら、GraphQLで取得できるデータが変わって、結果として表示できる的な感じになる気がした