Amplify（Appsync）でApollo clientを使う2020年4版

#Tl;Dr

https://qiita.com/yuuyun/items/a20192ecd7a6a45db5f3
の記事でやると、apollo-clientのバージョンアップせいで動かない

https://medium.com/@guillac124/create-your-custom-apollo-client-for-aws-appsync-to-use-hooks-2d5cbce29db5
の記事を参照に治すコードを最後に提示する

モチベーション

AWS Amplifyでサーバレスアプリケーションの簡単な構築を試していて、つなぐところまでなんとかできた。
しかし、React Hooksで書こうとしたらとても冗長になって嫌だった。
なので、もっと楽できる方法はと思い、上記の記事が見つかった。
useQueryめっちゃ使いたくなったので、そのとおりにやったらここ一年のアップデートのせいでうまくいかなかったので、その対策法を残す

解説

当時のバージョンに固定させてもなんとかなるけれども、それは悪手だから今の書き方にあったようにしような。と対応方法記事には書かれている。
その、別の書き方で進めるが、また時期の違いとして@apollo/clientを使っていく。
まだβ版だが、そちらを使うとライブラリの多くを一つで済ませられる

npm i @apollo/client aws-appsync-auth-link

さて、あとはサンプルコードである。

 import { ApolloProvider, ApolloClient, ApolloLink, createHttpLink, InMemoryCache } from '@apollo/client';
 import { createAuthLink } from 'aws-appsync-auth-link';
 

 const authConfig = {
   url: awsExports.aws_appsync_graphqlEndpoint,
   region: awsExports.aws_appsync_region,
   auth: {
     type: awsExports.aws_appsync_authenticationType,
     jwtToken: async () =>
       (await Auth.currentSession()).getIdToken().getJwtToken(),
   }
 }
 
 const link = ApolloLink.from([
   // @ts-ignore
   createAuthLink(authConfig),
   createHttpLink({uri: authConfig.url})
 ])
 const client = new ApolloClient({
   link,
   cache: new InMemoryCache()
 });

ReactDOM.render(
  <ApolloProvider client={client}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </ApolloProvider>,
  document.getElementById('root'),
);

TSのエラーが出る問題

@apollo/clientはβ版（3.0.0-beta.44）であり、2020年4月25日現在、正しく型を扱っていてもエラーが出る

createAuthLink(authConfig)

の部分で型エラーが出る。
https://github.com/apollographql/apollo-link/issues/1258

なので、エラー無視で潰すしか無い。

// @ts-ignore

で潰したほうが実践上良さそう。

ts−ignoreを使わない潰し方

 import { ApolloProvider, ApolloClient, ApolloLink, createHttpLink, InMemoryCache } from '@apollo/client';
 import { createAuthLink } from 'aws-appsync-auth-link';
 
 
 const authConfig = {
   url: awsExports.aws_appsync_graphqlEndpoint,
   region: awsExports.aws_appsync_region,
   auth: {
     type: awsExports.aws_appsync_authenticationType as "AMAZON_COGNITO_USER_POOLS",
     jwtToken: async () =>
       (await Auth.currentSession()).getIdToken().getJwtToken(),
   }
 }
 
 const link = ApolloLink.from([
   createAuthLink(authConfig) as unknown as ApolloLink,
   createHttpLink({uri: authConfig.url})
 ])
 const client = new ApolloClient({
   link,
   cache: new InMemoryCache()
 });

非常に微妙であるが、サンプルに載せておく。

そもそも、本当にapollo使う必要あんの？？？？

なんとかしてamplifyでapollo + appsyncが使えるようになったわけだが、本当にapolloっているの？と疑問が生じた。
私が使いたかったのはuseQueryという簡単に書くための記法である。

その解説については、一応別記事あつかいとする。
AWS Amplifyの問い合わせにtypescript + useQueryで楽したい