ryanguyan
ryanguyan
PostsComments
SSolidJS
Created by ryanguyan on 7/10/2023 in #support
Async Await Issues
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
7 replies
SSolidJS
Created by ryanguyan on 7/10/2023 in #support
Async Await Issues
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.
7 replies
SSolidJS
Created by ryanguyan on 7/10/2023 in #support
Async Await Issues
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();
  });
}
7 replies