😼

ApolloでのRest API扱い

2022/12/20に公開約2,600字

こんにちは、株式会社medibaでフロントエンジニアをしているyangです。
この投稿はmediba Advent Calendar 2022 の21日目の記事です。

猫の写真を載せたいため、記事を書きました。
早速ですが、虎です。
neko


本題に戻ります!
Apollo Clientを導入したPJにRestAPIを叩きたい場合どうするのか、

答えは、優しいBFFにお願いし、Graphqlにしてもらおう!
The End

.
.
.
.
.
.
.
.
.
.
.
.
.
.

どうしてもRest APIを直で叩きたい場合は、ApolloClientでも一応対応している

ApolloでのRest API扱いにあたって

メリット

  • 通信の一括管理できる(gqlと一箇所で)
  • エラーハンドリングなど簡単(@apollo/client/link/error
  • FetchPolicyなどの活用
  • キャッシュ管理

デメリット

  • graphql-codegen使えない~~
  • axiosなどより面倒になりがち ← 感覚差

扱い方

Apollo REST LINKドキュメント

普通にApollo Client を導入に当たって、下記のclientを作りますが、

export const client = new ApolloClient({
  uri: anyEndpoint,
  cache: new InMemoryCache(),
});

Rest APIのリンク先を一緒に入れておきたい場合

import {
...,
ApolloLink,
} from '@apollo/client';

const graphqlLink = createHttpLink({
  uri: anyEndpoint,
});
const restLink = new RestLink({ uri: 'https://swapi.dev/api/' }); ←例のURL(叩ける)

export const client = new ApolloClient({
   link: ApolloLink.from([restLink, graphqlLink]), //あるいはエラーハンドリングと一緒に三つを入れます。
  cache: new InMemoryCache(),
});

それからGraphqlを叩く時と同じくquery文を書いて(例のURL先に基づき)

export const getRestApiResult = gql`
  query Luke {
    person @rest(type: "Person", path: "people/1/") {
      name
    }
  }
`;

useQueryで取得する(client.queryもちろん)

const { data, loading, error } = useQuery(getRestApiResult);

↑でデータ取得後に↓のLazyQueryでfetchpolicyやキャッシュの動作も確認していた。

const [call, { data: lazyQueryData }] = useLazyQuery(getRestApiResult, { fetchPolicy: 'cache-only',});

結果:

call()を発火して、networkに新たなfetchがなくlazyQueryDataを取得できます(apollo cacheからのデータなので)

※chromeの拡張機能Apollo Client Devtoolsで直感的にキャッシュを見えます

→ RNだと公式にお薦めされてたreact-native-debugger


最後に

現在、medibaの募集求人ページから応募され入社が決定すると、お祝い金として30万円をプレゼントするキャンペーンを実施中です!!
リモート環境を充実するためディスプレイやマイクを買いそろえるも良し。スキル習熟のために自己研鑽に使うも良し。使途は完全自由です。

→ 募集・応募ページ

https://hrmos.co/pages/mediba/jobs/1100000001
いきなり応募だとちょっとハードルが高い・・でも興味がある方は、カジュアル面談も行っていますので、まずはお話してみませんか?
→ カジュアル面談
https://hrmos.co/pages/mediba/jobs/6100000001
※お祝い金は、試用期間(3か月)を経て、雇用が継続した場合に支給させて頂きます。

Discussion

ログインするとコメントできます