😼

ApolloでのRest API扱い

2022/12/20に公開

React

rest

Apollo

tech

こんにちは、株式会社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万円をプレゼントするキャンペーンを実施中です！！
リモート環境を充実するためディスプレイやマイクを買いそろえるも良し。スキル習熟のために自己研鑽に使うも良し。使途は完全自由です。

→　募集・応募ページ

いきなり応募だとちょっとハードルが高い・・でも興味がある方は、カジュアル面談も行っていますので、まずはお話してみませんか？
→　カジュアル面談

※お祝い金は、試用期間（3か月）を経て、雇用が継続した場合に支給させて頂きます。

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

扱い方

最後に

Discussion