S
SolidJS•2y ago
ryanguyan

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
mdynnl•2y 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
ryanguyanOP•2y 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
mdynnl•2y ago
kobalte probably does not support ssr, so the resource needs to be accessed once outside of kobalte component.
ryanguyan
ryanguyanOP•2y 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

Did you find this page helpful?