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?