apollo client導入

[hiro-lapis]

nuxt用のapolloがあるので、それを使用する

同梱パッケージ
・graphql-tag : raphQL クエリとスキーマ定義を文字列として記述し、それを JavaScript オブジェクトに変換するためのライブラリ

やること

golang

• CORS設定をした上でGraphqlリゾルバへ繋ぐ設定をする

nuxt

• apllo導入
• apllo設定
• サーバのエントリポイントへリクエスト送信

めも
・コンテナ起動時に実行されるのはappのルートディレクトリにあるmain.go
こいつを実行させたままでいいから、go run cmd/server.goでGraphqlサーバを起動する必要がある

・コーディング後は再度go run ...する必要あり
＊追々自動実行するのをserver.goに移すのもあり

[hiro-lapis]

Uncaught SyntaxError: Unexpected string (at instanceOf.mjs?v=b224f08b:12:36)というエラーが出る。
現状、graphqlのバージョンを16.6.0に下げるしかない

https://stackoverflow.com/questions/76527409/react-vitejs-unexpected-string

https://stackoverflow.com/questions/76530650/node-modules-broken-when-using-vite-react-apollo-client

[hiro-lapis]

https://stackoverflow.com/questions/76530650/node-modules-broken-when-using-vite-react-apollo-client
Edit: this should be fixed with 16.7.1 now.
ということで、7/23のアプデで修正されたみたい

[hiro-lapis]

https://pnpm.io/ja/package_json#pnpmoverrides

overrides設定でインストールするバージョンを指定できるみたいなので、これで行く

[hiro-lapis]

直ってないやん😂

[hiro-lapis]

↓のISSUE が解消したらバージョン上げる
graphql/graphql-js#2317

[hiro-lapis]

とりあえずエラーは解消🙌

[hiro-lapis]

キターーーーーーーーーーーー！！！

[hiro-lapis]

画面の初期表示でAPIリクエストを飛ばしたい時はuseQuery()を使用

画面の操作に応じてリクエストを実行する場合はuseAsyncQuery()を使う
＊注意

const asyncFetchTodo = async () => {
  // for grqphql, useAsyncQuery, (REST API =useFetch)
  // passing generic type to useAsyncQuery, it will be inferred
  const { data } = await useAsyncQuery<Todos>(query, {})
  // APIで取得したdataもvalueに格納されている
  datas.value = data.value?.todos as unknown as Todo[]
  console.log('fetched!!')
  console.log(datas.value)
  console.log('data.value')
  console.log(data.value)
}

上ののように、画面の初期表示にuseAsyncQueryを使うとawaitで待ってもレスポンスが返ってくるまでに変数への代入処理が実行されてしまう。
SSRで画面初期表示でデータ取得したいときはuseQueryを使い、result取得を待って代入処理するようにする。

[hiro-lapis]

nuxt.config.tsでSSRをONにしているため、
・初期実行関数でクライアントサイド依存のオブジェクトを使わない
・windowオブジェクトなどブラウザonlyのオブジェクトはonMounted()で実行
・もしくは画面操作に応じた関数でのみ実行
するように注意