useSWR 是什么？

• データ取得のための React Hooks ライブラリ

• useSWRというReact Hooksを用いることで、APIを通じたデータの取得・キャッシュを簡単に記述する手助けをしてくれる

Vercel製

特点

• 速い、 軽量 そして 再利用可能 なデータの取得

• 組み込みの キャッシュ とリクエストの重複排除

• リアルタイム な体験

• トランスポートとプロトコルにとらわれない

• SSR / ISR / SSG support

• TypeScript 対応

React Native

运用方式

useSWR(key, fetcherFunction, options)

指定关键用于识别数据获取和缓存的键。
可以使用字符串、条件或基于变量的数组来获取数据。
特别是在使用类似GraphQL的查询获取数据时，需要将查询字符串和所需变量指定为数组。

fetcherFunction是执行实际数据获取的函数。指定从API获取数据的函数或执行GraphQL查询的函数。这个函数接收第一个参数key的值作为参数，并且需要返回一个Promise。

可以将用于自定义useSWR行为的选项作为对象进行指定。

悬念：将其设置为true以与React的Suspense进行协作
在重新验证焦点时：指定是否重新验证数据
刷新间隔：指定以毫秒为单位重新获取数据的时间间隔

第一个参数

1. 文字字符 zì zì fú)

useSWR('/api/user', fetcher)

通常情况下，指示API的终点和密钥

2. 数组

useSWR([querySignerListForManagement, { input: queryInput }], fetcher)

如果使用类似GraphQL的查询，或者需要分别传入关键查询变量和参数时使用。使用数组的原因是为了区分具有不同变量和参数的相同GraphQL查询，以便将它们分别存储在缓存中。

第二个参数

关于Fetcher函数

fetcher函数在实际数据获取中起到了角色。
该函数接受useSWR的第一个参数key作为参数，并使用该key进行数据获取操作。然后，需要将数据获取结果作为Promise返回。

GraphQL 的情况下，可以考虑以下 fetcher 函数的示例：

import { GraphQLClient } from 'graphql-request'

const client = new GraphQLClient(YOUR_GRAPHQL_ENDPOINT)

const fetcher = async (query: string, variables: any) => {
  return await client.request(query, variables)
}

与GraphQL一起使用的模式。

GraphQL查询通常是以字符串形式定义的。当将其作为useSWR的第一个参数传递时，需要将该查询字符串以及相应的变量或参数作为数组传递。

const query = gql`
  query someQuery($input: SomeInputType!) {
    someField(input: $input) {
      ...fields
    }
  }
`

const { data } = useSWR([query, { input: someInput }], fetcher)

悬念与关系

当将useSWR的suspense: true选项启用时，在数据获取或发生错误时会抛出Promise。React的Suspense组件会捕捉这个抛出的Promise，并在数据获取完成之前显示回退UI。

根据这个结果，

• データの取得中にはフォールバックUIが表示される。

データが利用可能になると、目的のコンポーネントが自動的に再レンダリングされる。

<Suspense fallback={<div>Loading...</div>}>
  <ComponentUsingSWR />
</Suspense>