✨ Make it work with React Query v4

[kaciakmaciak]

Make react-query-subscription compatible with react-query@4.

Build

• [x] Support both React Query v3 and v4

Needs to be fixed

• [x] #65
• [x] The idle state has been removed (v4)
• [x] #69
• [x] #67
• [x] #73
• [ ] Other errors caused by upgrade

Need to be fixed for dev/tests

• [x] TypeScript (v4)
• [x] setLogger is removed (v4)

Consider for the future

• [ ] Support for React 18
• [ ] Proper offline support
• [ ] Implement fetchStatus

[mogobanyamwaro]

hello @kaciakmaciak is the issue solved?

[mogobanyamwaro]

i want to use the lib with react query v4?

[kaciakmaciak]

Hi, this is almost done, just a few tests are failing, but the examples look to work fine. So I need to figure out if the tests are failing because there is a regression or because of tests are written in a wrong way.

[kaciakmaciak]

The associated branch https://github.com/kaciakmaciak/react-query-subscription/tree/react-query-v4

I might release a beta version, to test in your project.

[kaciakmaciak]

The 2.0.0-beta.1 version is out with react query v4 as a peer dependency. Please give feedback and report if any issues. Cheers.

[kaciakmaciak]

Any feedback on beta version 👆 used with react query v4, please?

[Tbaut]

I'm using it successfully with react-query v4, thanks a lot for having published the beta.

A couple comments regarding the documentation for the example using graphql-ws:

• I'm not sure what QueryKey is used for. When using the example, I had the error:

Argument of type 'string' is not assignable to parameter of type 'QueryKey'.

Looking at the type I realized it's expecting an array. Using ["some-key"] silences the error, but I'd love to know more about this.

• Also the fromWsClientSubscription expects a client as the firs argument.

fromWsClientSubscription<{ comments: Array<Comment> }>(
  client, // <-- this needs to be added
  {
    query:  ...

[vitoorgomes]

Hey there

I have a weird bug here, I've updated the package to the 2.0.0-beta.1 version but when I tried to navigate to a page that was using the useSubscription hook I got a weird error

I'm using NextJS 13 (without the app folder) and it's weird because I have the QueryClient at the entrypoint and everything else, but here comes the really weird part. I downloaded the .rar source code, copied:

subscription-storage.ts
use-observable-query-fn.ts
use-subscription.ts

and pasted on my project, after that I imported the useSubscription hook directly from the use-subscription.ts file and it worked, I got no errors.

Since my project is kinda big right now, I thought that I could have some weird config, so I created a fresh one and the problem and "solution" was the same. I will leave the minimal reproducible repo here and also a CodeSandbox, the dependencies version and everything else are the same as my original project (I can't share it).

I left some basic instructions at the readme, but if you clone and run the dev server you will get the no query client set error, but if you swap the import (pages/index.tsx) to the source file instead the installed package, you will be able to render without this problem

I'm not sure what is causing, but a wild guess would be that maybe it's something related to the bundle itself that it's missing something