Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
zOadT opened this issue Dec 23, 2024 · 0 comments
Open

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

zOadT opened this issue Dec 23, 2024 · 0 comments

Comments

@zOadT
Copy link

zOadT commented Dec 23, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant