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; 

Answer 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