query icon indicating copy to clipboard operation
query copied to clipboard

[solid-query] Dependent queries throw `client() is undefined` error

Open zOadT opened this issue 1 year ago • 1 comments

Describe the bug

Hey! First of all: thanks for you work on this great library!

While trying to run a query depending on another query in solid-query I noticed an error being thrown. The following approach seems to work at first:

function Sub() {
  const parent = createQuery(() => ({
    queryKey: ['parent'],
    async queryFn() {
      await new Promise(r => setTimeout(r, 100)); // (A)
      return {
        id: 123,
      };
    },
  }));

  const childQuery = createQuery(() => ({
    queryKey: ["sub", parent.data?.id],
    enabled: parent.data?.id != null,
    async queryFn() {
      await new Promise(r => setTimeout(r, 200));
      return Promise.resolve("child" + parent.data?.id);
    },
  }));

  return (
    <div>
      {childQuery.data}
    </div>
  );
}

But as soon as the parent query is already prefetched by some other component, this component would throw a client() undefined error (see the provided sandbox for that) (Note that changing line (A) to wait for 300 ms will resolve the error, so there seems to be a race condition)

Your minimal, reproducible example

Stackblitz

Steps to reproduce

  1. Go to this stackblitz example
  2. Click on the Click here to cause the error link to navigate to /sub
  3. See the error being captured by the ErrorBoundary
  4. (optional) refetch the page to see that the page does not throw when the parent query isn't already cached
  5. Go back to the index route
  6. Change the first await new Promise(r => setTimeout(r, 100)); to await new Promise(r => setTimeout(r, 300));
  7. The error isn't there anymore after navigating to /sub -> seems there is some race condition

Expected behavior

As a user I would expect no error to be thrown, but there is an error thrown

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • Browser: Chrome 131, Firefox 133
  • solid-js: 1.9.3
  • @solidjs/router: 0.15.2

Tanstack Query adapter

solid-query

TanStack Query version

v5.62.8

TypeScript version

No response

Additional context

No response

zOadT avatar Dec 23 '24 16:12 zOadT

Can you assign this to me? Thanks!

gopnik5 avatar Apr 10 '25 17:04 gopnik5