react-fetching-library で Suspense 使ってみた。
最近ReactでAPIからデータフェッチする際にuseEffect
を使っていましたが、
これを読んだあと、これからはSuspense
を積極的に使っていこうと思い立ちました。
https://overreacted.io/ja/a-complete-guide-to-useeffect/
そんな自分にタイムリーなパッケージ、4日前(投稿日現在)に出来立てホヤホヤの
react-fetching-library
を発見。
早速使ってみたいと思います!
https://marcin-piela.github.io/react-fetching-library/#/?id=usesuspensequery
Suspense使用前
ポートフォリオに投稿したQiitaの記事を載せるために、こんな感じで実装していました。
レンダリングしている内容は省略します🙇♂️
import React from 'react'
import Writing from 'sections/Writing'
export default () => {
return (
<div>
<Writing />
</div>
)
}
import React, { useState, useEffect } from 'react'
import { fetchQiitaArticles } from 'lib/api'
export default () => {
const [articles, setArticles] = useState([])
useEffect(() => {
const handleGetArticles = response => {
setArticles(response)
}
fetchQiitaArticles({ handleGetArticles })
}, [])
return (
// fetchしたarticlesを使ってレンダリング
)
}
export const fetchQiitaArticles = async props => {
const { handleGetArticles } = props
await fetchGet({
auth: process.env.REACT_APP_QIITA_AUTH,
url: 'https://qiita.com/api/v2/authenticated_user/items',
successAction: handleGetArticles,
})
}
const fetchGet = async props => {
const { auth, url, successAction, failureAction } = props
return await fetch(url, {
headers: {
Authorization: `Bearer ${auth}`,
},
})
.then(response => response.json())
.then(responseJson => {
// console.log(responseJson)
if (successAction) {
successAction(responseJson)
}
})
.catch(error => {
// console.error(error)
if (failureAction) {
failureAction()
}
})
}
セットアップ
まずは react-fetching-library
をインストールします。
$ yarn add react-fetching-library
続いてClient
の作成します。
とりあえず今回はオプションなし。
import { createClient } from 'react-fetching-library'
export const Client = createClient()
そして<ClientContextProvider>
でAppを囲います。
import React from 'react'
import { ClientContextProvider } from 'react-fetching-library'
import { Client } from 'api/Client'
import Writing from 'sections/Writing'
export default () => {
return (
<ClientContextProvider client={Client}>
<Writing />
</ClientContextProvider>
)
}
これで、react-fetching-library
の機能が使用可能になりました!
fetchの用意
react-fetching-library
で使用するGET
メソッドを作成します。
export const fetchMyQiitaArticles = {
method: 'GET',
endpoint: 'https://qiita.com/api/v2/authenticated_user/items',
headers: {
Authorization: `Bearer ${process.env.REACT_APP_QIITA_AUTH}`,
},
}
コンポーネントのラップ
useEffect
を廃止してWritingContainer
でラップします。
その際、useSuspenseQuery
を使ってデータフェッチを行うようにします。
import React from 'react'
import { useSuspenseQuery } from 'react-fetching-library'
import { fetchMyQiitaArticles } from 'api/fetchMyQiitaArticles'
import Writing from 'sections/Writing'
export default () => {
const { payload, error, query } = useSuspenseQuery(fetchMyQiitaArticles)
return <Writing error={error} articles={payload} />
}
import React, { useState, useEffect } from 'react'
import { fetchQiitaArticles } from 'lib/api'
export default props => {
const { articles, error } = props
return (
// fetchしたarticlesを使ってレンダリング
)
}
Suspenseを使う!
App.js
import React, { Suspense } from 'react'
import { ClientContextProvider } from 'react-fetching-library'
import { Client } from 'api/Client'
import WritingContainer from 'container/WritingContainer'
export default () => {
return (
<ClientContextProvider client={Client}>
<Suspense fallback={<p>Loading ...</p>}>
<WritingContainer />
</Suspense>
</ClientContextProvider>
)
}
import React, { Suspense } from 'react'
import { ClientContextProvider } from 'react-fetching-library'
import { Client } from 'api/Client'
import WritingContainer from 'container/WritingContainer'
export default () => {
return (
<ClientContextProvider client={Client}>
<Suspense fallback={<p>Loading ...</p>}>
<WritingContainer />
</Suspense>
</ClientContextProvider>
)
}
かなりアバウトになりましたが、
これでSuspenseを使ったデータフェッチができました 🎉
おわりに
とりあえず自分はuseEffect
を使わずにデータフェッチができるようになりました。
Suspense
界隈のリリース情報はしっかり追っていきたいですね。
あとreact-fetching-library
の公式DocがTypeScript
で説明されていたので、
TypeScript
での開発のモチベーションになりそうです。
参考
Author And Source
この問題について(react-fetching-library で Suspense 使ってみた。), 我々は、より多くの情報をここで見つけました https://qiita.com/kumashun/items/36bde821822ca1334238著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .