ryanguyan Posts - Answer Overflow

ryanguyan

•Created by ryanguyan on 7/10/2023 in #support

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!

7 replies

SSolidJS

•Created by ryanguyan on 7/10/2023 in #support

SolidStart pRPC - No QueryClient set

I'm trying to do a basic server call to proxy a public API that has CORS. Here is the query:

export const fetchSummoner = query$({
  queryFn: async ({ payload }) => {
    return (
      await fetch(
        `https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/${payload}/`,
        {
          headers: {
            "X-Riot-Token": "API KEY HERE",
          },
        },
      )
    ).json();
  },
  key: "fetchSummoner",
});

export const fetchSummoner = query$({
  queryFn: async ({ payload }) => {
    return (
      await fetch(
        `https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/${payload}/`,
        {
          headers: {
            "X-Riot-Token": "API KEY HERE",
          },
        },
      )
    ).json();
  },
  key: "fetchSummoner",
});

And here is the code calling the query:

import { TextField } from "@kobalte/core";
import { Button } from "@kobalte/core";
import { createSignal } from "solid-js";
import { fetchSummoner } from "rpc/queries";

const [summonerName, setSummonerName] = createSignal("");

export const SearchBox = () => {
  return (
    <div class="flex">
      <TextField.Root>
        <TextField.Input
          value={summonerName()}
          onchange={(event) => setSummonerName(event.target.value)}
        />
      </TextField.Root>
      <Button.Root onClick={() => fetchSummoner(summonerName)} />
    </div>
  );
};

import { TextField } from "@kobalte/core";
import { Button } from "@kobalte/core";
import { createSignal } from "solid-js";
import { fetchSummoner } from "rpc/queries";

const [summonerName, setSummonerName] = createSignal("");

export const SearchBox = () => {
  return (
    <div class="flex">
      <TextField.Root>
        <TextField.Input
          value={summonerName()}
          onchange={(event) => setSummonerName(event.target.value)}
        />
      </TextField.Root>
      <Button.Root onClick={() => fetchSummoner(summonerName)} />
    </div>
  );
};

I get this error whenever I click the button:

Uncaught Error: No QueryClient set, use QueryClientProvider to set one
    at useQueryClient (QueryClientProvider.jsx:9:11)
    at createMemo.name [as fn] (createBaseQuery.js?v=09802489:27:35)
    at runComputation (chunk-MUZOR6PS.js?v=09802489:754:22)
    at updateComputation (chunk-MUZOR6PS.js?v=09802489:737:3)
    at createMemo (chunk-MUZOR6PS.js?v=09802489:308:10)
    at createBaseQuery (createBaseQuery.js?v=09802489:27:18)
    at createQuery (createQuery.js?v=09802489:5:10)
    at dev.jsx:42:12
    at HTMLButtonElement.onClick [as $$click] (SearchBox.tsx?t=1688999132533:36:22)
    at HTMLDocument.eventHandler (chunk-USCIF6OX.js?v=09802489:454:63)

Uncaught Error: No QueryClient set, use QueryClientProvider to set one
    at useQueryClient (QueryClientProvider.jsx:9:11)
    at createMemo.name [as fn] (createBaseQuery.js?v=09802489:27:35)
    at runComputation (chunk-MUZOR6PS.js?v=09802489:754:22)
    at updateComputation (chunk-MUZOR6PS.js?v=09802489:737:3)
    at createMemo (chunk-MUZOR6PS.js?v=09802489:308:10)
    at createBaseQuery (createBaseQuery.js?v=09802489:27:18)
    at createQuery (createQuery.js?v=09802489:5:10)
    at dev.jsx:42:12
    at HTMLButtonElement.onClick [as $$click] (SearchBox.tsx?t=1688999132533:36:22)
    at HTMLDocument.eventHandler (chunk-USCIF6OX.js?v=09802489:454:63)

Here is the query client set up in my root.tsx:

// @refresh reload
import { QueryProvider } from "@prpc/solid";
import { QueryClient } from "@tanstack/solid-query";
import { Suspense } from "solid-js";
import {
  A,
  Body,
  ErrorBoundary,
  FileRoutes,
  Head,
  Html,
  Meta,
  Routes,
  Scripts,
  Title,
} from "solid-start";
import "virtual:uno.css";

const queryClient = new QueryClient();

export default function Root() {
  return (
    <Html lang="en">
      <Head>
        <Title>SolidStart - Bare</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>
        <QueryProvider queryClient={queryClient}>
          <Suspense>
            <ErrorBoundary>
              <A href="/">Index</A>
              <A href="/about">About</A>
              <Routes>
                <FileRoutes />
              </Routes>
            </ErrorBoundary>
          </Suspense>
        </QueryProvider>
        <Scripts />
      </Body>
    </Html>
  );
}

// @refresh reload
import { QueryProvider } from "@prpc/solid";
import { QueryClient } from "@tanstack/solid-query";
import { Suspense } from "solid-js";
import {
  A,
  Body,
  ErrorBoundary,
  FileRoutes,
  Head,
  Html,
  Meta,
  Routes,
  Scripts,
  Title,
} from "solid-start";
import "virtual:uno.css";

const queryClient = new QueryClient();

export default function Root() {
  return (
    <Html lang="en">
      <Head>
        <Title>SolidStart - Bare</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>
        <QueryProvider queryClient={queryClient}>
          <Suspense>
            <ErrorBoundary>
              <A href="/">Index</A>
              <A href="/about">About</A>
              <Routes>
                <FileRoutes />
              </Routes>
            </ErrorBoundary>
          </Suspense>
        </QueryProvider>
        <Scripts />
      </Body>
    </Html>
  );
}

I checked the other pRPC thread with this same error, but I don't think it relates to my issue. Please advise. Thanks! Update: I have tried changing my onClick method to this:

<Button.Root onClick={fetchSummoner(summonerName)} />

<Button.Root onClick={fetchSummoner(summonerName)} />

And I am able to get the data passed to pRPC, but it has weird formatting in the payload and I get an error in the console everytime I do so: Weird format:

[{payload: ""test""}] // note the double quotation

[{payload: ""test""}] // note the double quotation

Console error:

chunk-USCIF6OX.js?v=09802489:454 Uncaught TypeError: handler.call is not a function
    at HTMLDocument.eventHandler (chunk-USCIF6OX.js?v=09802489:454:63)

chunk-USCIF6OX.js?v=09802489:454 Uncaught TypeError: handler.call is not a function
    at HTMLDocument.eventHandler (chunk-USCIF6OX.js?v=09802489:454:63)

3 replies

Gaming

Programming