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

console.log

console.log

console.log the value beforehand.

I tried diabling SSR and it left me with

response.json() is not a function

response.json() is not a function

response.json() is not a function

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>
  );
}

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",
      },
    },
  ),
);

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!

Async Await Issues

Similar Threads

Similar Threads

Similar Threads