Как начать звонок с помощью swr одним нажатием кнопки в NextJs?

Question

Я пытаюсь использовать UseSWR одним нажатием кнопки. Я бы хотел, чтобы при нажатии кнопки запускался вызов API с useSWR, но я получаю ошибку. Ошибка заключается в следующем:

      Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Это мой код:

        const onStartPro =() => {
    const token = session?.user?.access_token
    const url = process.env.BASE_URL + GET_PRO

    const {
      data: items,
      error,
      isLoading,
    } = useSWR(process.env.BASE_URL + 'pro user', getAuthenticatedClientSide(token,GET_PRO))
    
  }

И это моя функция получения:

      export const getAuthenticatedClientSide = async (token, endpoint) => {
  const url = process.env.BASE_URL + endpoint
  try {
    const res = await wretch(url).auth(`Bearer ${token}`).get().json()
    return res
  } catch (e) {
    const error = new Error(e)
    error.info = e.message
    error.status = e.status
    throw error
  }
}

Где я ошибаюсь? Помоги мне, пожалуйста :(

Answer 1

если вы хотите вызвать SWR в этом методе, вам придется использовать его, если вы хотите вызвать его только один раз, вам нужно передать переменную вuseEffectтак:

      let onceCall = 1

useEffect(() => {
  const onStartPro = () => {
    const token = session?.user?.access_token
    const url = process.env.BASE_URL + GET_PRO

    const {
      data: items,
      error,
      isLoading,
    } = useSWR(process.env.BASE_URL + 'pro user', getAuthenticatedClientSide(token, GET_PRO))

  }

  if (onceCall <= 1) {
    onStartPro()
    onceCall += 1
  }

}, [onceCall])

Answer 2

useSwr — это забавный трюк, он будет таким же, как useEffect. поэтому вы не можете использовать внутреннюю функцию события. вам следует попробовать axios или fetch, как обычный вызов функции внутри вашего мероприятия.

использовать функцию выборки

      export const fetcher = async (path: string) => {
  const res = await fetch(`${API_URL}${path}`, {
    headers: {
      Authorization: TOKEN || '',
      Accept: 'application/json, text/plain, */*',
      'User-Agent': '*'
    }
  });

      const res = await fetcher(`/users`);