react integration: using ReactQueryDevtools inside RSPCProvider #107
Comments
|
It looks like I forgot to update the docs when I changed how this is handled a while back. I will make sure I do that. Try the following: <QueryClientProvider client={queryClient}>
<ReactQueryDevtools />
<RSPCProvider client={client} queryClient={queryClient}>
<App />
</RSPCProvider>
</QueryClientProvider>I could be wrong but based on that error it also kinda looks like your Next 13 app directory which will not play nicely with rspc (or Tanstack Query as far as I'm aware) on the server side, ensure you are It's also worth noting rspc doesn't have official support for SSR so your mileage may vary with that use case. Although do feel free to file bugs you find with it and I will look into them. Personal Notes related to this:
|
|
Yes I'm on next 13 app directory. When adding And this might be off topic for this issue but, what's the blocker for rspc being supported on ssr? Is it just a matter of testing? And.. if rspc doesn't support SSR, does it make sense for the example use |
|
To jump in on this, I also experienced some weirdness with rspc@0.1.2 in Next. I'm not using the app directory (it's... clearly not ready for prime-time yet, and neither is the rest of the React ecosystem). But I am using Tauri and statically exporting my site with I found I had to do this, otherwise rspc would throw on server render: export let client;
if (typeof window !== "undefined") {
const { createClient } = require("@rspc/client");
const { TauriTransport } = require("@rspc/tauri");
client = createClient<Procedures>({
transport: new TauriTransport(),
});
}For what it's worth, there's multiple levels of "SSR support" -- generally the minimum level is that a library does nothing during SSR, which is often fine. (For example, React Query has explicit SSR support via a few mechanisms, the most basic of which is to not attempt any query until it's hydrated client-side.) This might already be fixed on |
|
I will give this a look when I have some time. I am probably not going to officially support the Next 13 app directory until TanStack Query (and probably also tRPC) do officially because I would like to see the patterns they come up. However, that doesn't mean it won't work, I just won't recommend it's usage. It would probably make the most sense, for now, to use the I recall you being able to do something like this when Next 13 launched to trick it into treating external packages as client components which you may need to do to correctly attach the context provider. This is something I will likely build into rspc I just need to check if Vercel recommend me adding "use client";
export * from "@rspc/react";In terms of SSR support with the non-app directory and SolidStart that is definitely something I would accept PRs for and will work on when I am able to dedicate the time to it. If TanStack Query has SSR support I suspect nothing would stop you from just using although because I haven't tested it I wouldn't be surprised if you run across issues (although file them here or in a separate GH issue). I wonder if the example shown by @lostfictions is not working because of the In terms of this @dlight as I didn't do the Next.JS example (it was a PR) I am not sure. It's possible Next.JS don't support the browser |
|
Fair enough! About the websocket thing: it will actually error when doing ssr, but what I actually need is subscriptions (which isn't very well supported by react-query so I'm not even using it, I just wrap on a I tried some approaches for disabling SSR (using dynamic imports would give a DYNAMIC_SERVER_USAGE error; and another approach would give an error I forgot about), none successful, so I ended up doing lostfictions's trick and websockets finally work. So I guess |
hmm, that's odd... |
i'll take a look at the source for the tauri transport when i can -- but i do want to note that tauri offers a next.js template as part of their blessed workflow, and as far as i remember said template doesn't require the use of workarounds like |
Apologies if this is already fixed on master, I'm on @rspc/react 0.1.2 (and @tanstack/react-query 4.21.0, @tanstack/react-query-devtools 4.21.0)
So, react-query has a devtools widget that looks like this:
Since `RSPCProvider is defined as
I expected that I could just add a `ReactQueryDevtools tag inside it, like this
But this is met with an inescrutable error
See error message
I have
NODE_ENV=developmentset so this can't be it.PS: Another issue is that I can't add multiple children to
RSPCProvider. I think that's because{children}is defined aschildren?: ReactElement;which means it can have zero or one children. Adding a component insideQueryClientProviderwhich in turn hasReactQueryDevtoolsinside it doesn't work either: it doesn't error like this but it mysteriously isn't shown.The text was updated successfully, but these errors were encountered: