search

OrJDev / create-jd-app

The quickest and most efficient way to start new full stack, type safed Solid web app
671 stars 26 forks source link

No QueryClient set, use QueryClientProvider when using tRPC in server action #95

Closed lupin246 closed 1 year ago

lupin246 commented 1 year ago

Setup

Will you deploy this project to vercel? If so, how None What should we use for this app? tRPC Do you want to use SSR with tRPC? Yes

Description

When I try to use tRPC on the server I get the following error

Error: No QueryClient set, use QueryClientProvider to set one
    at useQueryClient (/node_modules/.pnpm/solid-trpc@0.1.0-sssr.7_@tanstack+solid-query@5.0.0-alpha.16_@trpc+client@10.12.0_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3050:11)
    at eval (/node_modules/.pnpm/solid-trpc@0.1.0-sssr.7_@tanstack+solid-query@5.0.0-alpha.16_@trpc+client@10.12.0_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3080:57)
    at Proxy.createMemo (file:///home/user/dev/test/node_modules/.pnpm/solid-js@1.7.3/node_modules/solid-js/dist/server.js:83:9)
    at createBaseQuery (/node_modules/.pnpm/solid-trpc@0.1.0-sssr.7_@tanstack+solid-query@5.0.0-alpha.16_@trpc+client@10.12.0_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3080:40)
    at createQuery (/node_modules/.pnpm/solid-trpc@0.1.0-sssr.7_@tanstack+solid-query@5.0.0-alpha.16_@trpc+client@10.12.0_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3220:10)
    at Object.useQuery (/node_modules/.pnpm/solid-trpc@0.1.0-sssr.7_@tanstack+solid-query@5.0.0-alpha.16_@trpc+client@10.12.0_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3398:12)
    at eval (/node_modules/.pnpm/solid-trpc@0.1.0-sssr.7_@tanstack+solid-query@5.0.0-alpha.16_@trpc+clie
nt@10.12.0_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:1269:26)
    at Object.apply (/node_modules/.pnpm/solid-trpc@0.1.0-sssr.7_@tanstack+solid-query@5.0.0-alpha.16_@trpc+client@10.12.0_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:646:14)
    at Object.$$serverHandler0 (/src/routes/index.tsx:29:60)
    at execute (/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/server/server-functions/server.ts:198:37)
    at Object.fn (/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/server/server-functions/server.ts:210:12)
    at Module.handleServerRequest (/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/server/server-functions/server.ts:173:34)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async eval (/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/server/middleware.ts:41:30)
    at async eval (/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/api/middleware.ts:33:12)
    at async eval (/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/entry-server/StartServer.tsx:45:12)
    at async devFetch (file:///home/user/dev/test/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/dev/server.js:46:12)
    at async startHandler (file:///home/user/dev/test/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/dev/server.js:115:20)

Code Snippet

import { type VoidComponent } from 'solid-js';
import { redirect } from 'solid-start';
import { createServerAction$ } from 'solid-start/server';

import { trpc } from '~/utils/trpc';

const Home: VoidComponent = () => {
  // const hello = trpc.example.hello.useQuery(() => ({ name: 'from tRPC' }));

  const [_, { Form }] = createServerAction$(async (formData: FormData) => {
    try {
      const hello = trpc.example.hello.useQuery(() => ({ name: 'from tRPC' }));
      console.log(hello?.data);
    } catch (error) {
      console.log(error);
    }

    const name = formData.get('name');
    console.log(name);

    return redirect('/');
  });

  return (
    <main>
      {/* <p>{hello.data ?? 'Loading tRPC query'}</p> */}
      <Form>
        <input type="text" name="name" />
        <input type="submit">Submit</input>
      </Form>
    </main>
  );
};

export default Home;

Is there a step I am missing?

OrJDev commented 1 year ago

Setup

Will you deploy this project to vercel? If so, how None

What should we use for this app? tRPC

Do you want to use SSR with tRPC? Yes

Description

When I try to use tRPC on the server I get the following error


Error: No QueryClient set, use QueryClientProvider to set one

    at useQueryClient (/node_modules/.pnpm/solid-trpc@0.1.0-sssr.7_@tanstack+solid-query@5.0.0-alpha.16_@trpc+client@10.12.0_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3050:11)

    at eval (/node_modules/.pnpm/solid-trpc@0.1.0-sssr.7_@tanstack+solid-query@5.0.0-alpha.16_@trpc+client@10.12.0_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3080:57)

    at Proxy.createMemo (file:///home/user/dev/test/node_modules/.pnpm/solid-js@1.7.3/node_modules/solid-js/dist/server.js:83:9)

    at createBaseQuery (/node_modules/.pnpm/solid-trpc@0.1.0-sssr.7_@tanstack+solid-query@5.0.0-alpha.16_@trpc+client@10.12.0_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3080:40)

    at createQuery (/node_modules/.pnpm/solid-trpc@0.1.0-sssr.7_@tanstack+solid-query@5.0.0-alpha.16_@trpc+client@10.12.0_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3220:10)

    at Object.useQuery (/node_modules/.pnpm/solid-trpc@0.1.0-sssr.7_@tanstack+solid-query@5.0.0-alpha.16_@trpc+client@10.12.0_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3398:12)

    at eval (/node_modules/.pnpm/solid-trpc@0.1.0-sssr.7_@tanstack+solid-query@5.0.0-alpha.16_@trpc+clie

nt@10.12.0_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:1269:26)

    at Object.apply (/node_modules/.pnpm/solid-trpc@0.1.0-sssr.7_@tanstack+solid-query@5.0.0-alpha.16_@trpc+client@10.12.0_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:646:14)

    at Object.$$serverHandler0 (/src/routes/index.tsx:29:60)

    at execute (/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/server/server-functions/server.ts:198:37)

    at Object.fn (/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/server/server-functions/server.ts:210:12)

    at Module.handleServerRequest (/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/server/server-functions/server.ts:173:34)

    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

    at async eval (/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/server/middleware.ts:41:30)

    at async eval (/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/api/middleware.ts:33:12)

    at async eval (/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/entry-server/StartServer.tsx:45:12)

    at async devFetch (file:///home/user/dev/test/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/dev/server.js:46:12)

    at async startHandler (file:///home/user/dev/test/node_modules/.pnpm/solid-start@0.2.26_@solidjs+meta@0.28.2_@solidjs+router@0.8.2_solid-js@1.7.3_solid-start-node@0.2.26_vite@4.1.2/node_modules/solid-start/dev/server.js:115:20)

Code Snippet


import { type VoidComponent } from 'solid-js';

import { redirect } from 'solid-start';

import { createServerAction$ } from 'solid-start/server';

import { trpc } from '~/utils/trpc';

const Home: VoidComponent = () => {

  // const hello = trpc.example.hello.useQuery(() => ({ name: 'from tRPC' }));

  const [_, { Form }] = createServerAction$(async (formData: FormData) => {

    try {

      const hello = trpc.example.hello.useQuery(() => ({ name: 'from tRPC' }));

      console.log(hello?.data);

    } catch (error) {

      console.log(error);

    }

    const name = formData.get('name');

    console.log(name);

    return redirect('/');

  });

  return (

    <main>

      {/* <p>{hello.data ?? 'Loading tRPC query'}</p> */}

      <Form>

        <input type="text" name="name" />

        <input type="submit">Submit</input>

      </Form>

    </main>

  );

};

export default Home;

Is there a step I am missing?

This is not a valid way of calling a hook. You cannot use a hook inside of server context, this will have to be declared within the page / client component. Might have serverSideHelpers in the future