Multiple requests when opening a page with SWR and NextJS

46 views Asked by At

I have a page where I have to show the result of a request made with SWR, done as follows:

export const fetchWithUser = async (url: string) => {
  const token = await showToken()

  return fetch(`${url}`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json; charset=utf-8',
      Authorization: `Bearer ${token}`
    }
  }).then((res) => {
    return res.json()
  })
}


export default function Page({ params }: { params: { request: number } }) {
  const [canSave, setCanSave] = useState<boolean>(false)
  const { showAlert } = useContext(JWTErrorContext)

  const { data, isLoading, mutate, error } = useSWR(
    process.env.BACKEND_URL + '/request/' + params.request,
    fetchWithUser
  )

  return (
   ...
  )
}

Each time a request is made, the log of this request is recorded in my backend (NestJS) using the Logger.

The problem is that when opening the page, it made 3 requests at once, which ends up polluting my log record.

@mcchart/server:dev: [Nest] 18208  - 16/10/2023 10:04:29     LOG [GetRequestByClientSideID] Getting request by client side id...
@mcchart/server:dev: [Nest] 18208  - 16/10/2023 10:04:29     LOG [GetRequestByClientSideID] Request gotten.
@mcchart/server:dev: [Nest] 18208  - 16/10/2023 10:04:29     LOG [GetRequestByClientSideID] Getting request by client side id...
@mcchart/server:dev: [Nest] 18208  - 16/10/2023 10:04:29     LOG [GetRequestByClientSideID] Request gotten.
@mcchart/server:dev: [Nest] 18208  - 16/10/2023 10:04:30     LOG [GetRequestByClientSideID] Getting request by client side id...
@mcchart/server:dev: [Nest] 18208  - 16/10/2023 10:04:30     LOG [GetRequestByClientSideID] Request gotten.

How to solve this problem? Does this have to do with the way I display the data? Why are there 3 requests at once instead of one?

0

There are 0 answers