Ошибка при попытке получить API с помощью SWR (Next.js)

Question

Я успешно запустил следующий код со страницы примеров SWR:

import useSWR from "swr";

const fetcher = url => fetch(url).then(res => res.json());

export default function App() {
  const { data, error } = useSWR(
    "https://api.github.com/repos/vercel/swr",
    fetcher
  );

  if (error) return "An error has occurred.";
  if (!data) return "Loading...";
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>{data.subscribers_count}</strong>{" "}
      <strong>{data.stargazers_count}</strong>{" "}
      <strong>{data.forks_count}</strong>
    </div>
  );
}

Однако, когда я использую свой собственный API и обновляю свойства для отображения ({data.id}, {data.title}...), я получаю "Произошла ошибка".

Если я удалю условные возвраты, я получу "данные не определены":

Необработанная ошибка времени выполнения TypeError: данные не определены

Я использовал свой API в других частях проекта, и у меня не было проблем.

Answer 1

Я лично справляюсь с этим как в этом примере

useRequest.js:

      import useSWR from 'swr'
import axios from 'axios'

export default function useRequest(request, { initialData, ...config } = {}) {
  return useSWR(
    request && JSON.stringify(request),
    () => axios(request || {}).then(response => response.data),
    {
      ...config,
      initialData: initialData && {
        status: 200,
        statusText: 'InitialData',
        headers: {},
        data: initialData
      }
    }
  )
}

sample.jsx:

        import useRequest from '../libs/useRequest'

  const { data } = useRequest({
    url: 'https://api.github.com/repos/vercel/swr'
  })