Fetching data error with useSWR, reactjs, nextjs

Question

I would like fetch data from backend. I use useSWR. In function getDataUseSWR is two bugs. At line 'fetch(url).then' errors: 1:"Expected 0 arguments, but got 1.";
2: "Property 'then' does not exist on type '(input: RequestInfo, init?: RequestInit | undefined) => Promise'.";

When I tried fetch in AlfaComponent with useSWR, it works, but when I split it to two files, then it doesn't work.

Documentation: data fetching with useSWR

import useSWR from 'swr'

export async function getDataUseSWR (urlInput: string): Promise<any> {
  const fetcher = (url) => fetch(url).then((res) => res.json());      // <- here are errors, at 'fetch(url).then' errors: 
                                                                      // 1:"Expected 0 arguments, but got 1.";  
                                                                      // 2: "Property 'then' does not exist on type '(input: RequestInfo, init?: RequestInit | undefined) => Promise<Response>'."

  let { data, error } = useSWR(`${urlInput}`, fetcher)
  
  if (data.ok) {
    return data
  } else {
    return error
  }
}

Code with fetch():

import React, { useState } from 'react';
import type { NextPage } from 'next'
import { useRouter } from 'next/router';
import { getDataUseSWR } from "../requests/ser";

type Props = {}

const AlfaComponent: NextPage = (props: Props) => {

  const [data, setData] = useState();

  const getData = async () => {
    const response = await getDataUseSWR('http://localhost:5000/data/export')
    setData(response)
  }
  getData()

  return (
    <>
      <div />
      .
      .
      .
    </>
  );
};

export default AlfaComponent;

illia chill · Accepted Answer · 2022-03-17 08:15:53Z

1

useSWR is a hook. You are trying to run hook in await function. You should create a class in /lib folder and call this class to fetch data on Client side

Example class:

export class GeneralFunctions {

    static async getDataUseSWR (urlInput: string): Promise<any> {
    //your body of class function
    // do not use hooks here
    }
}

Than you can call you function, something like:

const response = await GeneralFunctions.getDataUseSWR('http://localhost:5000/data/export')

But I don't understand why don't you just

//don't need absolute path on client side
// you should call your api endpoint
const {data: incomingData, error: incomingError) = useSWR('/data/export')

if (incomingData){
 return <div>ok!</div>
}
if (incomingError){
 return <div>error produced</div>
}

return <div>Loading...</div>

useSWR is similar to useEffect hook

Proof of code working here

edited Mar 17, 2022 at 8:15

answered Mar 16, 2022 at 19:05

illia chill

2,07611 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Elo Over a year ago

useSWR useSWR('/data/export') does not work without fetcher. And fetcher is what throws a mistake.

illia chill Over a year ago

It does. I have no code with fetcher in my products. Just try it/

illia chill Over a year ago

I added a proof

Collectives™ on Stack Overflow

Fetching data error with useSWR, reactjs, nextjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related