Nuxt•5mo ago

API route called multiple times

I have a page which calls an API route once:

const { data: guilds } = useFetch("/api/discord/guilds");

const { data: guilds } = useFetch("/api/discord/guilds");

However on the server side it's logging as three separate requests. This is bad because in my server I'm calling an external API and it's getting me ratelimited. Any ideas how to only call my API once?

7 Replies

manniL•5mo ago

then you probably have three calls. hard to tell without more info consider caching the result on the server side / in the api though?

ethan!OP•5mo ago

i can assure you i have one call well when the bot joins a server the info will be outdated so i cant really cache

<template>
  <div class="mt-20 mb-10">
    <h1 class="text-5xl font-bold">Select a server</h1>
    <h2 class="text-xl text-muted-foreground mb-5">You manage <span class="text-primary">{{ user?.guilds.length }}</span> servers</h2>

    <Button variant="outline" @click="refreshGuilds">
      <Icon icon="radix-icons:reload" class="mr-2 h-5 w-5" />
      <span class="text-base">Refresh</span>
    </Button>

    <div class="mx-1 h-px bg-muted my-10" />
  </div>
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-9">
    <Card v-for="(guild, i) in guilds" :key="i" class="flex flex-col justify-between flex-grow">
      <CardHeader>
        <img :src="`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`" alt="icon" height="70" width="70" class="rounded-full">
        <CardTitle class="pt-3 text-lg break-words">{{ guild.name }}</CardTitle>
        <CardDescription class="text-base">{{ guild.owner ? 'Owner' : 'Server Manager' }}</CardDescription>
      </CardHeader>
      <CardFooter>
        <Button :variant="guild.botInGuild ? 'default' : 'outline'" class="w-full text-base">
          <RouterLink :external="guild.botInGuild ? false : true" :to="guild.botInGuild ? `/dashboard/${guild.id}/member-screening` : `https://discord.com/oauth2/authorize?client_id=${runtimeConfig.public.url}&guild_id=${guild.id}&redirect_uri=${encodeURIComponent(`${runtimeConfig.public.url}/dashboard`)}&response_type=code&permissions=8&scope=bot`">
            {{ guild.botInGuild ? 'Configure' : 'Add Bot' }}
          </RouterLink>
        </Button>
      </CardFooter>
    </Card>
  </div>
</template>

<script setup lang="ts">
  import { Icon } from "@iconify/vue";
  import { useToast } from "@/components/ui/toast/use-toast";

  const { toast } = useToast();
  const runtimeConfig = useRuntimeConfig();

  const user = useUser();
  const { data: guilds } = useFetch("/api/discord/guilds");

  async function refreshGuilds() { // TODO: ratelimit
    if(!user) return toast({ title: "Uh oh! Something went wrong.", description: "If this issue persists, please contact the site manager." });

    // TODO
  }
</script>

<template>
  <div class="mt-20 mb-10">
    <h1 class="text-5xl font-bold">Select a server</h1>
    <h2 class="text-xl text-muted-foreground mb-5">You manage <span class="text-primary">{{ user?.guilds.length }}</span> servers</h2>

    <Button variant="outline" @click="refreshGuilds">
      <Icon icon="radix-icons:reload" class="mr-2 h-5 w-5" />
      <span class="text-base">Refresh</span>
    </Button>

    <div class="mx-1 h-px bg-muted my-10" />
  </div>
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-9">
    <Card v-for="(guild, i) in guilds" :key="i" class="flex flex-col justify-between flex-grow">
      <CardHeader>
        <img :src="`https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.png`" alt="icon" height="70" width="70" class="rounded-full">
        <CardTitle class="pt-3 text-lg break-words">{{ guild.name }}</CardTitle>
        <CardDescription class="text-base">{{ guild.owner ? 'Owner' : 'Server Manager' }}</CardDescription>
      </CardHeader>
      <CardFooter>
        <Button :variant="guild.botInGuild ? 'default' : 'outline'" class="w-full text-base">
          <RouterLink :external="guild.botInGuild ? false : true" :to="guild.botInGuild ? `/dashboard/${guild.id}/member-screening` : `https://discord.com/oauth2/authorize?client_id=${runtimeConfig.public.url}&guild_id=${guild.id}&redirect_uri=${encodeURIComponent(`${runtimeConfig.public.url}/dashboard`)}&response_type=code&permissions=8&scope=bot`">
            {{ guild.botInGuild ? 'Configure' : 'Add Bot' }}
          </RouterLink>
        </Button>
      </CardFooter>
    </Card>
  </div>
</template>

<script setup lang="ts">
  import { Icon } from "@iconify/vue";
  import { useToast } from "@/components/ui/toast/use-toast";

  const { toast } = useToast();
  const runtimeConfig = useRuntimeConfig();

  const user = useUser();
  const { data: guilds } = useFetch("/api/discord/guilds");

  async function refreshGuilds() { // TODO: ratelimit
    if(!user) return toast({ title: "Uh oh! Something went wrong.", description: "If this issue persists, please contact the site manager." });

    // TODO
  }
</script>

the page itself loads two times

manniL•5mo ago

that could be updated via webhook in theory 😄 but just some ideas

the page itself loads two times

Why?

ethan!OP•5mo ago

i dont know @manniL / TheAlexLichter okay so it only seems to do it when im on the page then i restart

manniL•5mo ago

console errors? most likely hydration problems. see https://www.youtube.com/watch?v=TYyEjN0UrfA

Vuejs Amsterdam

YouTube

Alexander Lichter - Vue.js Hydration Demystified - Vuejs Amsterdam ...

ethan!OP•5mo ago

? but it only happens when i first start the project after that they load fine

manniL•5mo ago

On reload The video should help

Gaming

Programming

API route called multiple times