次にフェッチするデータ.SWRの使い方

次.JSはクライアントとサーバサイドの両方のレンダリングをサポートしているので、データを取得する方法はいくつかあります.一つはSWRを使用することです.そして、それはリモートデータ取得のために一連の反応フックです.
このチュートリアルでは、SWR、キャッシュ、ページ化、再検証などのようなものを簡単にするライブラリを見ていきます.また、データを取得する次のアプリJSON Placeholder SWRの使用

What is SWR?

Setting up

Fetching the data with useSWR

Creating the components

Paginating the data with useSWRInfinite

始めましょう!

SWRとは

SWRはstale-while-revalidate . それは、同じチームの背後に作成された軽量ライブラリですNext.js . これは、フェッチ、キャッシュ、またはリアルタイムで反応フックのデータを再フェッチすることができます.SWRは3つのステップで進みます.まず、キャッシュを返して、サーバーからデータを取得(再検証)し、最終的に最新のデータとともに来ます.この方法では、SWRは、サーバーから新しいデータを取得しながらユーザーに何かを表示させることによって、ユーザーエクスペリエンスを向上させます.
SWRはバックエンドの不可知性で、HTTPリクエストをサポートするサーバからデータを取得するために使用できます.これは、typescriptとサーバー側のレンダリングにも良いサポートしています.
つまり、私たちは手を汚すことができますし、新しい次の設定.JSアプリはSWR機能を使用します.

設定

新しいアプリケーションを設定するには、次のアプリを作成するために行くよ.
コマンドラインインターフェイス( CLI )を開き、このコマンドを実行します.

    npx create-next-app next-swr-app

パッケージをインストールします

    npm install swr

次に、このようにフォルダを構築します.

├── components
| └── Post.js
├── pages
| └── index.js
├── useRequest.js
└── package.json

ファイル構造を壊しましょう

Post.js コンポーネントはPOSTオブジェクトの表示に責任があります.

index.js 我々のアプリのホームページです.

useRequest.js SWRを使用してデータを取得するのに役立つカスタムフックです.

このフォルダ構造を使用すると、次のセクションのJSONプレースホルダからリモートデータを取得できます.

USEWRでデータを取得する

SWRでリモートデータを取得するにはuseSWR or useSWRInfinite . しかし、フックの間には若干の違いがあります.最初のデータの取得だけで、2番目のフックは、データを取得し、取得することができます.使えますuseSWRInfinite あなたの次に無限のスクロールまたはページを追加するには.時間がないのJSアプリ.
さあ、ファイルを調べましょうuseRequest.js :

import useSWR from "swr"

const fetcher = url => fetch(url).then(res => res.json())
const baseUrl = "https://jsonplaceholder.typicode.com"

export const useGetPosts = path => {
  if (!path) {
    throw new Error("Path is required")
  }

  const url = baseUrl + path

  const { data: posts, error } = useSWR(url, fetcher)

  return { posts, error }
}

データを取得するためにこのカスタムフックを使用することは任意です.代わりにSWRフックを直接コンポーネントに使用できます.
The fetcher 関数はHTTPリクエストをサーバに送信し、応答データをJSONにパースします.The fetch メソッドはunfetch パッケージは次の発送.js
次に、useGetPosts クエリを送信する関数useSWR フック.引数として受け取るurl サーバとfetcher クエリを実行する関数です.データが取得されると、posts とerror 状態.
このカスタムフックを使用する準備ができたら、現在取得した記事を表示するコンポーネントを作成できます.

コンポーネントの作成

components/Post.js

export default function Post({ post }) {
  const { title, body, id } = post
  return (
    <div className="Card">
      <h1 className="Card--title">
        {id}. {title}
      </h1>
      <p className="Card--body">{body}</p>
    </div>
  )
}

ご覧のように、シンプルなコンポーネントを受け取りますpost パラメータとして表示するにはその後、我々は、ポストを表示するためにオブジェクトから要素を引き出すために破壊を使用します.

App.js

import { useGetPosts } from "../useRequest"
import Post from "../components/Post"

export default function IndexPage() {
  const { posts, error } = useGetPosts("/posts")

  if (error) return <h1>Something went wrong!</h1>
  if (!posts) return <h1>Loading...</h1>

  return (
    <div className="container">
      <h1>My Posts</h1>
      {posts.map(post => (
        <Post post={post} key={post.id} />
      ))}
    </div>
  )
}

ここでは、我々はuseGetPosts フックをしてリクエストを実行するための引数としてパスを渡します.It returns the posts エラー状態を表示する.
その後、我々はPost データの配列を表示するコンポーネント.エラーが発生した場合、error SWRによって提供されます.
この手順を実行すると、ブラウザですべてが動作するかどうかを確認できます.そのためには、プロジェクトをCLIで開き、次のコマンドを実行します.

  yarn dev

またはnpm

  npm run dev

ブラウザで会いましょうhttp://localhost:3000
すごい!データをサーバから取得しますuseSWR フック.
我々が以前に言ったように、SWRは簡単にデータをpaginatingすることができるもう一つのフックを提供します.我々のアプリを更新しましょうuseSWRInfinite .

USSPERINFINCEによるデータのページ化

まだ使用可能ですuseSWR データをページ化するフックですが、追加のコードとSWRが既に提供されているのでuseSWRInfinite それをする.

useRequest.js

import { useSWRInfinite } from "swr"

const fetcher = url => fetch(url).then(res => res.json())
const baseUrl = "https://jsonplaceholder.typicode.com"

export const usePaginatePosts = path => {
  if (!path) {
    throw new Error("Path is required")
  }

  const url = baseUrl + path
  const PAGE_LIMIT = 5

  const { data, error, size, setSize } = useSWRInfinite(
    index => `${url}?_page=${index + 1}&_limit=${PAGE_LIMIT}`,
    fetcher
  )

  const posts = data ? [].concat(...data) : []
  const isLoadingInitialData = !data && !error
  const isLoadingMore =
    isLoadingInitialData ||
    (size > 0 && data && typeof data[size - 1] === "undefined")
  const isEmpty = data?.[0]?.length === 0
  const isReachingEnd =
    isEmpty || (data && data[data.length - 1]?.length < PAGE_LIMIT)

  return { posts, error, isLoadingMore, size, setSize, isReachingEnd }
}

The useSWRInfinite フックはリクエストキーを返す関数を引数として期待しますfetcher 関数とオプション.リクエストキー(index ) SWRはどのデータを取得するかを知るために使用します.リクエストキーの初期値は0 , それで、我々はそれによって増加しなければなりません1 各リクエスト.URLで定義する2番目の引数はPAGE_LIMIT , これはリクエストごとに取得する項目の数です.useSWRInfinite それより多くの値を返します.私は、私がここで必要としないデータを取り除きました.これらの変数をどう説明しましょう

posts サーバから取得したデータの配列です.

isLoadingInitialData 取得するデータがまだ残っているかどうかを調べます.

isLoadingMore 現在データを取得しているかどうかを調べます.

isEmpty データの配列が空かどうかチェックします.

isReachingEnd ページの制限に達したかどうかを調べます.

次に、コンポーネントを使用するために値を返します.

App.js

import { usePaginatePosts } from "../useRequest"

import Post from "../components/Post"

export default function IndexPage() {
  const {
    posts,
    error,
    isLoadingMore,
    size,
    setSize,
    isReachingEnd,
  } = usePaginatePosts("/posts")

  if (error) return <h1>Something went wrong!</h1>
  if (!posts) return <h1>Loading...</h1>

  return (
    <div className="container">
      <h1>My Posts with useSWRInfinite</h1>
      {posts.map(post => (
        <Post post={post} key={post.id} />
      ))}
      <button
        disabled={isLoadingMore || isReachingEnd}
        onClick={() => setSize(size + 1)}
      >
        {isLoadingMore
          ? "Loading..."
          : isReachingEnd
          ? "No more posts"
          : "Load more"}
      </button>
    </div>
  )
}

ここでは、我々は最初のインポートusePaginatePosts そして、引数としてAPIエンドポイントを渡します.次に、フックによって返される値を使用してポストを表示し、新しいデータを読み込みます.一度load more ボタンをクリックすると、SWRは次のページにリクエストを送信し、データを返します.これにより、データは現在、useSWRInfinite フック.
この手順を使用すると、このコマンドをCLIで実行することで、ページネーションが動作するかどうかをテストできます.

  yarn dev

ブラウザで会いましょうhttp://localhost:3000
そして、それ!我々のアプリは良い探しています!
次はクライアント側のSWRライブラリを使用します.jsこれで完成したプロジェクトを見つけることができますCodeSandbox .
このような他の偉大なコンテンツを見つけることができますmy blog または通知を得るために私に従ってください.
読書ありがとう!