React Query without React Context

[markomitranic]

Dear community, i searched far and wide for how to use react-query with Astro to no avail. It seems like nanostores/query is the only choice.

Because astro has an islands architecture, we are unable to share the same react context on the whole page. In other words, each client component is its own "island" and cannot share state with the rest of the page. This is brilliant and has many great benefits, but a big drawback is the lack of contexts.

Well, that isn't true per se. You see, zustand, nanostores and similar packages that simply utilize a global store are perfectly capable of doing this. It is only React Context, that is unable to do so, because the whole page will not get hydrated, only the islands will.

So, if nanostores is able to fit their "context" into a global store that is framework agnostic, what prevents us from doing the same? Why are we limited to a React Context, instead of being able to use a global store like zustand to keep a shared cache?

[TkDodo]

React Query is not limited to react context, it’s just the easiest way to distribute the queryClient without having to think about it.

You’re totally free to distribute the queryClient how you want, and then pass it manually:

// myApp.tsx
export const queryClient = new QueryClient()

// myComponent.tsx

function MyComponent() {
  const query = useQuery(options, queryClient)
}

You can pass the queryClient as second argument to useQuery (and all other hooks) and we will take that one instead of doing a context lookup.

[markomitranic]

Oh wow! I knew about this, but never connected the dots. Thank you for sharing the solution!