如何对所有 API 方法使用 SWR 挂钩？（增删改查）

Question

我正在切换以前通过令牌提供的某些 CRUD 功能，但现在我正在使用 SWR，但我不知道如何转换它。我将这个钩子用于 GET 方法，但对于其他方法，我不知道该怎么办！

export default function useGetData(apiKey) {
const fetcher = async (...args) => await fetch(...args).then(res => res.json());
const { data, mutate, error } = useSWR(apiKey, fetcher);

const loading = !data && !error;

return {
    loading,
    user: data,
    mutate
}
}

Answer 1

好的，我找到了答案：

import useSWR from 'swr';
import { getTokenFromLocalStorage } from '../../services/storage';
  export default function useGetData({ url, payload, options = {}}) {
  const mainUrl = process.env.NEXT_PUBLIC_BASE_URL + URL;
  const method = payload ? 'POST' : 'GET';
  const fetcher = async () => {
    const headers = {
      Authorization: `Bearer ${getTokenFromLocalStorage()}`
    };
    const options = {
      method,
      headers,
      ...(payload && { body: payload }),
    };

    return await fetch(mainUrl, options).then((res) => res.json());
  };
  const defaultOptions = {
    revalidateIfStale: false,
    revalidateOnFocus: false,
    revalidateOnReconnect: false,
  };
  const { data, mutate, error, isValidating } = useSWR(url + method, fetcher, {
    ...defaultOptions,
    ...options,
  });
  const loading = !data && !error;
  return { data, loading, error, mutate, isValidating };
}