Fecthing multiple times to the same endpoint
Unanswered
Gharial posted this in #help-forum
GharialOP
I am using the latest version of nextjs and I have a component that inside makes a call to an API, the problem I have is that I have to repeat that component many times, so it ends up making many requests to the the same endpoint, is there any way to avoid that?
19 Replies
@Gharial I am using the latest version of nextjs and I have a component that inside makes a call to an API, the problem I have is that I have to repeat that component many times, so it ends up making many requests to the the same endpoint, is there any way to avoid that?
Blue Picardy Spaniel
did you find a fix?
@Blue Picardy Spaniel did you find a fix?
GharialOP
I used the hook useSWC from SWR library to avoid repeat the same fetch
@Gharial I used the hook useSWC from SWR library to avoid repeat the same fetch
Blue Picardy Spaniel
thing is it only happens on hard reset and it only happens in dev mode
@Blue Picardy Spaniel thing is it only happens on hard reset and it only happens in dev mode
GharialOP
The hook for me looks like that
@Blue Picardy Spaniel thing is it only happens on hard reset and it only happens in dev mode
GharialOP
I don't know what you are trying to say with 'dev mode' but in my case I have 40 components making the same request and it only makes one and shares the data with the components.
@Gharial I don't know what you are trying to say with 'dev mode' but in my case I have 40 components making the same request and it only makes one and shares the data with the components.
Blue Picardy Spaniel
it only does this in development. when i build my project and use npm run start, it doesn’t duplicate the requests
GharialOP
can I look your code?
@Gharial can I look your code?
Blue Picardy Spaniel
yeah i’ll send it when i get home
Blue Picardy Spaniel
export async function getBotGuilds(): Promise<Guild[] | null> {
const res = await fetch(baseUrl + "/users/@me/guilds", {
headers: {
Authorization: `Bot ${env.BOT_TOKEN}`
}
});
const json = await res.json();
if(!res.ok) {
console.log(json, "getBotGuilds");
return null;
}
const guilds: Guild[] = json
.map((guild: Guild) => ({
id: guild.id,
name: guild.name,
icon: guild.icon,
owner: guild.owner,
permissions: guild.permissions
}));
return guilds;
}@Gharial i’m literally just calling this in my file
GharialOP
ok , and whats the specific problem?
@Gharial ok , and whats the specific problem?
Blue Picardy Spaniel
when i hard reload my project and go to the page which calls the http request, the http request happens 3 times.
hard reload = exiting my browser, turning off the app, turning on the app and opening the page
hard reload = exiting my browser, turning off the app, turning on the app and opening the page
the issue doesn’t occur on hot reload
hot reload = making live changed without turning off the app
hot reload = making live changed without turning off the app
GharialOP
Yes, this is a problem with the dev mode, it makes more requests, but it happened with npm run start?. In production it should not make it.
@Gharial Yes, this is a problem with the dev mode, it makes more requests, but it happened with npm run start?. In production it should not make it.
Blue Picardy Spaniel
correct, the issue is only in development and not production
how do i stop it in development?
GharialOP
I guess it is normal for this to happen
Blue Picardy Spaniel
but i can’t afford for that to happen, its making me get rate limited