feat: Tanstack useQueries support

[whygee-dev]

This PR adds support for Tanstack's useQueries hook (see API and parallel queries).

This allows grouping of queries and combining results. The new useQueries test suite provides good examples of how this can be used.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1482f80

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@powersync/tanstack-react-query	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Chriztiaan]

This looks better, I'd like to retest it after we merge the incremental watch PR.

[Chriztiaan]

Last bit of housekeeping @whygee-dev , could you add a changeset entry? npm run changeset/pnpm changeset, and just add a nice patch entry describing what you did for the package :)

Might also need to update with main. And then we can get this in!

[whygee-dev]

Last bit of housekeeping @whygee-dev , could you add a changeset entry? npm run changeset/pnpm changeset, and just add a nice patch entry describing what you did for the package :)

Might also need to update with main. And then we can get this in!

done

[Chriztiaan]

Hey @whygee-dev ! Really sorry for the long delay on this, appreciate your patience.

I've just pushed some updates (fixed imports and added explicit types + jsdoc examples). Would you mind giving it one last look when you get a chance?

Thanks again for the contribution!

[whygee-dev]

@Chriztiaan

Added explicit types for useQueries() options. Added jsdoc examples.

LGTM ! Thank you

[Chriztiaan]

Thanks for checking @whygee-dev,
I was doing a last check by incorporating your work in a demo. Do you know why error isn't being set here?

 const x = useQueries({
   queries: [
     { queryKey: ['todoLists'], query: 'SELECT * FROM lists' },
     { queryKey: ['todos'], query: 'sele' }
   ]
 });

[whygee-dev]

Hmm I'm not able to reproduce while incorporating useQueries into the existing example-nextjs demo

  const [customersList, customers] = useQueries({
    queries: [
      { queryKey: ['customersList'], query: 'SELECT * FROM customers' },
      { queryKey: ['customers'], query: 'sele' }
    ]
  });

  console.log("customersList error", customersList.error);
  console.log("customers error", customers.error);

[Chriztiaan]

So @whygee-dev it seems like there is something strange happening.
On the react-supabase-demo I am seeing this:
It shows null, and after about 5 seconds the error shows for one moment and then disappears. I think the error is accidentally being cleared.

[whygee-dev]

So @whygee-dev it seems like there is something strange happening. On the react-supabase-demo I am seeing this: It shows null, and after about 5 seconds the error shows for one moment and then disappears. I think the error is accidentally being cleared.

Can you push somewhere the reproduction please ? I'll take a look ASAP

[Chriztiaan]

Can you push somewhere the reproduction please ? I'll take a look ASAP
Sure @whygee-dev, please the following. You might just need to populate the .env file if you want to use it straight from there.

Repo: https://github.com/Chriztiaan/tanstack-powersync-reproduction
Diff: Chriztiaan/tanstack-powersync-reproduction@64091c3

[whygee-dev]

Can you push somewhere the reproduction please ? I'll take a look ASAP
Sure @whygee-dev, please the following. You might just need to populate the .env file if you want to use it straight from there.

Repo: https://github.com/Chriztiaan/tanstack-powersync-reproduction Diff: Chriztiaan/tanstack-powersync-reproduction@64091c3

So after investigating, it seems like it the error is unset and soon after is set again. This seems expected behavior by tanstack query retry mechanism

From: https://tanstack.com/query/latest/docs/framework/react/guides/query-retries

When a useQuery query fails (the query function throws an error), TanStack Query will automatically retry the query if that > query's request has not reached the max number of consecutive retries (defaults to 3) or a function is provided to
determine if a retry is allowed.

So what happens is when tanstack query retries, the error is unset during the loading.

I can confirm this by disabling the retry

  const [customersList, customers] = useQueries({
    queries: [
      { queryKey: ['lists'], query: 'SELECT * FROM lists' },
      { queryKey: ['todos'], query: 'sele', retry: false }
    ]
  });

The error is then never unset after it has been set