SolidJS•15mo ago

Async Await Issues

Not sure what is going on here, I think I'm just using async await incorrectly. I am unable to get the resource to load unless I console.log the value beforehand. I tried diabling SSR and it left me with response.json() is not a function

import { createRouteData, useParams, useRouteData } from "solid-start";
import { IconNumberBox } from "~/components/IconNumberBox";
import { fetchSummoner2 } from "~/server/api/queries";

interface ISummonerData {
  id: string;
  accountId: string;
  puuid: string;
  name: string;
  profileIconId: number;
  revisionDate: number;
  summonerLevel: number;
}

export function routeData() {
  const params = useParams();
  return createRouteData(async () => {
    const response = await fetchSummoner2(params.summonerName);
    return (await response.json()) as ISummonerData;
  });
}

export default function SummonerDetails() {
  const summonerData = useRouteData<typeof routeData>();
  console.log(summonerData()); //if i remove this line, I never resolve
  return (
    <div class="inline">
      <IconNumberBox profileIconId={summonerData()?.profileIconId} />
    </div>
  );
}

import { createRouteData, useParams, useRouteData } from "solid-start";
import { IconNumberBox } from "~/components/IconNumberBox";
import { fetchSummoner2 } from "~/server/api/queries";

interface ISummonerData {
  id: string;
  accountId: string;
  puuid: string;
  name: string;
  profileIconId: number;
  revisionDate: number;
  summonerLevel: number;
}

export function routeData() {
  const params = useParams();
  return createRouteData(async () => {
    const response = await fetchSummoner2(params.summonerName);
    return (await response.json()) as ISummonerData;
  });
}

export default function SummonerDetails() {
  const summonerData = useRouteData<typeof routeData>();
  console.log(summonerData()); //if i remove this line, I never resolve
  return (
    <div class="inline">
      <IconNumberBox profileIconId={summonerData()?.profileIconId} />
    </div>
  );
}

fetchSummoner2 function:

export const fetchSummoner2 = server$((summonerName) =>
  fetch(
    `https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/${summonerName}/`,
    {
      headers: {
        "X-Riot-Token": "API KEY",
      },
    },
  ),
);

export const fetchSummoner2 = server$((summonerName) =>
  fetch(
    `https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/${summonerName}/`,
    {
      headers: {
        "X-Riot-Token": "API KEY",
      },
    },
  ),
);

Any help or alternatiave approaches would be greatly appreciated. Thanks!

4 Replies

mdynnl•15mo ago

what does IconNumberBox look like? does it actually use the prop profileIconId? https://start.solidjs.com/api/createRouteData could help with the details

ryanguyan•15mo ago

IconNumberBox uses that prop to get the image id:

import { Image } from "@kobalte/core";

export const IconNumberBox = (props) => {
  return (
    <div class="relative h-100px w-100px">
      <Image.Root>
        <Image.Img
          class="max-h-100% max-w-100% rounded"
          src={`http://ddragon.leagueoflegends.com/cdn/13.13.1/img/profileicon/${props.profileIconId}.png`}
        />
        <Image.Fallback class="inline-block h-100px w-100px rounded border-style-dashed">
          Summoner
        </Image.Fallback>
      </Image.Root>
      <span class="absolute bottom-0 right-0 color-white">120</span>
    </div>
  );
};

import { Image } from "@kobalte/core";

export const IconNumberBox = (props) => {
  return (
    <div class="relative h-100px w-100px">
      <Image.Root>
        <Image.Img
          class="max-h-100% max-w-100% rounded"
          src={`http://ddragon.leagueoflegends.com/cdn/13.13.1/img/profileicon/${props.profileIconId}.png`}
        />
        <Image.Fallback class="inline-block h-100px w-100px rounded border-style-dashed">
          Summoner
        </Image.Fallback>
      </Image.Root>
      <span class="absolute bottom-0 right-0 color-white">120</span>
    </div>
  );
};

I checked out that link and I was able to use their example endpoint totally fine. I think it's because I'm trying to use a server$ function inside that's getting it messed up. I also tried calling createServerData$ inside the function which was no good (returned undefined):

export function routeData({ params }: RouteDataArgs) {
  return createServerData$(() => {
    async () =>
      (
        await fetch(
          `https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/${params.summonerName}/`,
          {
            headers: {
              "X-Riot-Token": "API KEY",
            },
          },
        )
      ).json();
  });
}

export function routeData({ params }: RouteDataArgs) {
  return createServerData$(() => {
    async () =>
      (
        await fetch(
          `https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/${params.summonerName}/`,
          {
            headers: {
              "X-Riot-Token": "API KEY",
            },
          },
        )
      ).json();
  });
}

I also tried just calling it bypassing the server$ call:

export function routeData({ params }: RouteDataArgs) {
  return createRouteData(
    async () =>
      // const response = await fetchSummoner2(params.summonerName);
      // return (await response.json()) as ISummonerData;
      // const response = await fetchSummoner2(params.summonerName);
      // return (await response.json()) as ISummonerData;
      (
        await fetch(
          `https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/${params.summonerName}/`,
          {
            headers: {
              "X-Riot-Token": "API KEY",
            },
          },
        )
      ).json() as unknown as ISummonerData,
  );
}

export default function SummonerDetails() {
  const summonerData = useRouteData<typeof routeData>();
  return (
    <div class="inline">
      <IconNumberBox profileIconId={summonerData()?.profileIconId} />
      <p>{summonerData()?.accountId}</p> { /* only works if I call this, when I delete this line it breaks */ }
    </div>
  );
}

export function routeData({ params }: RouteDataArgs) {
  return createRouteData(
    async () =>
      // const response = await fetchSummoner2(params.summonerName);
      // return (await response.json()) as ISummonerData;
      // const response = await fetchSummoner2(params.summonerName);
      // return (await response.json()) as ISummonerData;
      (
        await fetch(
          `https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/${params.summonerName}/`,
          {
            headers: {
              "X-Riot-Token": "API KEY",
            },
          },
        )
      ).json() as unknown as ISummonerData,
  );
}

export default function SummonerDetails() {
  const summonerData = useRouteData<typeof routeData>();
  return (
    <div class="inline">
      <IconNumberBox profileIconId={summonerData()?.profileIconId} />
      <p>{summonerData()?.accountId}</p> { /* only works if I call this, when I delete this line it breaks */ }
    </div>
  );
}

And this also only works if I access the values twice. I can console log it or add another element that accesses the data to grab it. Digging deeper into this only got me more lost.

mdynnl•15mo ago

kobalte probably does not support ssr, so the resource needs to be accessed once outside of kobalte component.

ryanguyan•15mo ago

That sounds right, just checked their docs and I didn't add this: Usage with SolidStart If you are using SolidStart you will need to add the ssr setting to your vite.config.ts:

import solid from "solid-start/vite";
import { defineConfig } from "vite";
export default defineConfig({
  plugins: [solid()],
  ssr: {
    noExternal: ["@kobalte/core"],
  },
});

import solid from "solid-start/vite";
import { defineConfig } from "vite";
export default defineConfig({
  plugins: [solid()],
  ssr: {
    noExternal: ["@kobalte/core"],
  },
});

from: https://kobalte.dev/docs/core/overview/ssr I'm going to mark as resolved

Gaming

Programming

Async Await Issues