SolidJS•12mo ago

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)

1 Reply

Massukka•12mo ago

I dont think you need to make new queryclient, just using <QueryClient>... Should be enough, but I don't know if this helps your issue. Also I would make payload have zod schema

Gaming

Programming

SolidStart pRPC - No QueryClient set