[axios-hooks] React hooks cho axios, có hỗ trợ tích hợp cho việc kết xuất phía máy chủ 😍

https://reqres.in

Client Side Rendering

— Example 1

import React from "react";
import ReactDOM from "react-dom";
import useAxios from "axios-hooks";
function App() {
  const [{ data, loading, error }, refetch] = useAxios(
    "https://reqres.in/api/users?delay=1"
  );
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;
  return (
    <div>
      <button onClick={refetch}>refetch</button>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

— Example 2 (cache)

import React from 'react'
import ReactDOM from 'react-dom'
import useAxios, { configure } from 'axios-hooks'
import LRU from 'lru-cache'
import Axios from 'axios'
const axios = Axios.create({
  baseURL: 'https://reqres.in/api',
})
const cache = new LRU({ max: 10 })
configure({ axios, cache })
function App() {
  const [{ data, loading, error }, refetch] = useAxios('/users?delay=1')
  return (
    <div>
      <button onClick={refetch}>refetch</button>
      {loading && <p>Loading...</p>}
      {error && <p>Error!!!</p>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

— Example 3 (PUSH)

import React from "react";
import ReactDOM from "react-dom";
import useAxios from "axios-hooks";
function App() {
  const [{ data: getData, loading: getLoading, error: getError }] = useAxios(
    "https://reqres.in/api/users/1?delay=1"
  );
  const [
    { data: putData, loading: putLoading, error: putError },
    executePut
  ] = useAxios(
    {
      url: "https://reqres.in/api/users/1",
      method: "PUT"
    },
    { manual: true }
  );
  function updateData() {
    executePut({
      data: {
        ...getData,
        updatedAt: new Date().toISOString()
      }
    });
  }
  if (getLoading || putLoading) return <p>Loading...</p>;
  if (getError || putError) return <p>Error!</p>;
  return (
    <div>
      <button onClick={updateData}>update data</button>
      <pre>{JSON.stringify(putData || getData, null, 2)}</pre>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

— Example 4 (pagination)

import Head from 'next/head';
import useAxios from 'axios-hooks';
import { useState } from 'react';
export default function Example() {
  const [pagination, setPagination] = useState({})
  const [{ data, loading }, refetch, cancelRequest] = useAxios({
    url: 'https://reqres.in/api/users?delay=5',
    params: { ...pagination }
  })
  const handleFetch = () => {
    setPagination({ per_page: 2, page: 2 })
  }
  const externalRefetch = async () => {
    try {
      await refetch()
    } catch (e) {
      // Handle cancellation
    }
  }
  return (
    <>
      <div>
        <button onClick={handleFetch}>refetch</button>
        <button onClick={externalRefetch}>External Refetch</button>
        <button disabled={!loading} onClick={cancelRequest}>
          Cancel Request
        </button>
        {loading && <p>...loading</p>}
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    </>
  );
}

Server Side Rendering

axios-hookshỗ trợ liền mạch các tình huống kết xuất phía máy chủ, bằng cách tải trước dữ liệu trên máy chủ và cung cấp dữ liệu cho máy khách, do đó máy khách không cần phải tải lại.

Nó hoạt động như thế nào

1. cây thành phần React được hiển thị trên máy chủ

2. useAxiosYêu cầu HTTP được thực hiện trên máy chủ

3. mã máy chủ chờ serializeCache()để có được biểu diễn tuần tự hóa của bộ đệm yêu cầu-phản hồi

4. máy chủ đưa phiên bản bộ nhớ đệm được tuần tự hóa JSON vào một windowbiến toàn cục

5. máy khách hydrat hóa bộ nhớ đệm từ biến toàn cục trước khi hiển thị ứng dụng bằng cách sử dụngloadCache

— Example 5

Đây ta thấy chúng hỗ trợ server side Rendering đây.

pages\index.tsx

import { GetServerSideProps } from "next";
import axiosInstance from "../utils/axiosInstance";
import useAxios from "axios-hooks";
interface Post {
  id: number;
  title: string;
  body: string;
}
interface Props {
  initialData: Post[];
}
export default function Home({ initialData }: Props) {
  // Sử dụng axios-hooks với dữ liệu đã fetch từ SSR
  const [{ data, loading, error }] = useAxios<Post[]>("https://jsonplaceholder.typicode.com/posts", {
    manual: false,
    useCache: true
  });
  console.log(initialData)
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error loading posts</p>;
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {initialData?.map((post) => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}
// Fetch dữ liệu từ server trước khi render trang
export const getServerSideProps: GetServerSideProps = async () => {
  const { data } = await axiosInstance.get<Post[]>("/posts");
  return {
    props: { 
      initialData: data 
    },
  };
};

utils\axiosInstance.ts

import axios from "axios";
const axiosInstance = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com",
});
export default axiosInstance;

Nhận thấy nếu thay axios-hooks bởi axios thì nó bị lỗi ngay vì axios chỉ hỗ trợ client-side thôi