최근 React에서 API에서 데이터를 가져올 때 useEffect를 사용했습니다.
이것을 읽은 후, 앞으로는 Suspense를 적극적으로 사용해 나가려고 생각했습니다.
h tps : // 오오 ぇ ㄴ ㄴ d. 이오 / 자 / 아 - mp ぇ 테구이 - 토우 우에 에후 ct /

그런 자신에게 적시 패키지, 4 일 전 (투고일 현재)에 완성 후야 호야react-fetching-library 발견.
조속히 사용하고 싶습니다!

h tps : // 마 r シン ぴえぁ. 기주 b. 이오 / 레아 ct ぇ t 찐 g ぃ b 등 ry / # /? I d = Usesu s Pensekue ry

Suspense 사용 전

포트폴리오에 투고한 Qiita의 기사를 올리기 위해서, 이런 느낌으로 구현하고 있었습니다.
렌더링하는 내용은 생략합니다 🙇‍♂️

App.js

import React from 'react'
import Writing from 'sections/Writing'

export default () => {
  return (
    <div>
      <Writing />
    </div>
  )
}

sections/Writing.js

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を使ってレンダリング
  )
}

lib/api.js

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 를 만듭니다.
우선 이번에는 옵션 없음.

api/Client.js

import { createClient } from 'react-fetching-library'
export const Client = createClient()

그리고 <ClientContextProvider> 에서 앱을 둘러쌉니다.

App.js

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 메소드를 작성합니다.

api/fetchMyQiitaArticles.js

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 를 사용해 데이터 페치를 실시하도록(듯이) 합니다.

container/WiritingContainer.js

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} />
}

sections/Writing.js

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>
  )
}

꽤 어바웃이 되었지만,
이제 Suspense를 사용하여 데이터를 가져올 수 있습니다 🎉

결론

우선 자신은 useEffect 를 사용하지 않고 데이터 페치를 할 수 있게 되었습니다.Suspense 경계의 릴리스 정보는 확실히 쫓아가고 싶네요.
그리고 react-fetching-library 의 공식 Doc가 TypeScript 로 설명되고 있었으므로,TypeScript 에서 개발 동기 부여가 될 것 같습니다.

참고