(solid query/trpc) does not hydrate properly

[shiro]

The trpc resolver is getting double-fetched, once on the server during SSR and once on client hydration.

Steps to reproduce:

• update src/server/trpc/router/example.ts to:

  hello: procedure.input(z.object({ name: z.string() })).query(({ input }) => {
    const num = Math.random();
    console.log("hi", num);
    return `Hello ${input.name} ${num}`;
  }),

• run the app
• observe the SSR random number being displayed on page load and getting changed after a split-second.

Might be a tanstack query problem (their start example works properly, but is a couple start versions behind and updating it yields errors, so I gave up)

[OrJDev]

The trpc resolver is getting double-fetched, once on the server during SSR and once on client hydration.

Steps to reproduce:

• update src/server/trpc/router/example.ts to:

  hello: procedure.input(z.object({ name: z.string() })).query(({ input }) => {

    const num = Math.random();

    console.log("hi", num);

    return `Hello ${input.name} ${num}`;

  }),

• run the app

• observe the SSR random number being displayed on page load and getting changed after a split-second.

Might be a tanstack query problem (their start example works properly, but is a couple start versions behind and updating it yields errors, so I gave up)

I think its under tanstack query because i remember facing this issue on trpc so i went back and checked what happens if i just run a query regardless of trpc, it still ran it twice. How about crate a new app and instead of using trpc just use createQuery and see if its being ran twice. If so an issue should be opened under tanstack query

[OrJDev]

The trpc resolver is getting double-fetched, once on the server during SSR and once on client hydration.

Steps to reproduce:

• update src/server/trpc/router/example.ts to:

  hello: procedure.input(z.object({ name: z.string() })).query(({ input }) => {

    const num = Math.random();

    console.log("hi", num);

    return `Hello ${input.name} ${num}`;

  }),

• run the app

• observe the SSR random number being displayed on page load and getting changed after a split-second.

Might be a tanstack query problem (their start example works properly, but is a couple start versions behind and updating it yields errors, so I gave up)

I think its under tanstack query because i remember facing this issue on trpc so i went back and checked what happens if i just run a query regardless of trpc, it still ran it twice. How about crate a new app and instead of using trpc just use createQuery and see if its being ran twice. If so an issue should be opened under tanstack query

So basically at the index page instead of calling .myRouter.query.createQuery()

Change it to

createQuery(() => ({ queryKey, queryFn))

Directly from solid query.

[OrJDev]

yep so from what i tested even with a simple query like:

 const hello = createQuery(() => ({
    queryKey: ["test"],
    queryFn: async () => {
      console.log("called");
      const arn = Math.floor(Math.random() * 100);
      console.log({ arn });
      return `Hello ${arn}`;
    },
    refetchOnWindowFocus: false,
  }));

it is being fetched twice, once on client and once on server (first reload is ssr and second on client is because this function isn't server function). it should have rendered on the page 6 but it rendered 31 because it made another call on the client.

[OrJDev]

cc @ardeora

 "dependencies": {
    "@solidjs/router": "^0.13.0",
    "@solidjs/start": "^0.7.4",
    "solid-js": "^1.8.15",
    "vinxi": "^0.3.10",
    "@solidjs/meta": "^0.29.3",
    "@solid-mediakit/trpc": "^3.0.0",
    "@tanstack/solid-query": "^5.27.5",
    "@trpc/client": "^10.45.1",
    "@trpc/server": "^10.45.1",
    "zod": "^3.22.4"
  },

[OrJDev]

so basically the main issue here is not the hydration is that solid query makes 2 requests instead of 1 for some reason.

[ardeora]

https://stackblitz.com/github/ardeora/solid-start-query-bug-repo

Could I get an isolated example with solid query that does double refetch? In this example above you can see that the request doesnt fire on client unless you switch tabs

[OrJDev]

https://stackblitz.com/github/ardeora/solid-start-query-bug-repo

Could I get an isolated example with solid query that does double refetch? In this example above you can see that the request doesnt fire on client unless you switch tabs

https://github.com/OrJDev/solid-query-bug

here is a video of it actually broken.

2024-03-16.12-35-53.mp4

so in the video you can see that it calls the function on both client & server, causing it to render the wrong number, even tho i just opened the page and i disabled refetchOnWindowFocus.

[ardeora]

Should be fixed in v5.28.5+ https://stackblitz.com/edit/github-fg2nmx?file=src%2Froutes%2Findex.tsx

[OrJDev]

@shiro according to Aryan this is fixed

c890f64

please try and re-open this issue if you still face this bug.