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/[email protected]_@[email protected]_@[email protected]_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3050:11)

    at eval (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3080:57)

    at Proxy.createMemo (file:///home/user/dev/test/node_modules/.pnpm/[email protected]/node_modules/solid-js/dist/server.js:83:9)

    at createBaseQuery (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3080:40)

    at createQuery (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3220:10)

    at Object.useQuery (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:3398:12)

    at eval (/node_modules/.pnpm/[email protected]_@[email protected]_@trpc+clie

[email protected]_@trpc+serve_rgpicpkohfucgjiz66s4i2bely/node_modules/solid-trpc/dist/index.js:1269:26)

    at Object.apply (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@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/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/server/server-functions/server.ts:198:37)

    at Object.fn (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/server/server-functions/server.ts:210:12)

    at Module.handleServerRequest (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/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/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/server/middleware.ts:41:30)

    at async eval (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/api/middleware.ts:33:12)

    at async eval (/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/entry-server/StartServer.tsx:45:12)

    at async devFetch (file:///home/user/dev/test/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/dev/server.js:46:12)

    at async startHandler (file:///home/user/dev/test/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/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

from create-jd-app.