react-query-native-devtools icon indicating copy to clipboard operation
react-query-native-devtools copied to clipboard

Support React Query 4 (`@tanstack/react-query`)

Open renchap opened this issue 3 years ago • 6 comments

React Query is now part of "Tanstack Query" and has been bumped to v4: https://tanstack.com/query/v4/docs/guides/migrating-to-react-query-4

It would be great to support it in this library, it does not look like many changes would be needed.

renchap avatar Jul 20 '22 20:07 renchap

@renchap I tried it and it worked without any change. Looks like the public API we use didn't change.

import * as React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

if (__DEV__) {
  import('react-query-native-devtools').then(({ addPlugin }) => {
    addPlugin({ queryClient });
  });
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyReactQueryApp />
    </QueryClientProvider>
  );
}

bgaleotti avatar Jul 24 '22 18:07 bgaleotti

Yes it seems to work, but the types are not working as the react-query package is replaced by @tanstack/react-query.

I am not sure how to fix this to support both.

renchap avatar Jul 24 '22 20:07 renchap

Yes it seems to work, but the types are not working as the react-query package is replaced by @tanstack/react-query.

Oh I see.

I am not sure how to fix this to support both.

Maybe we should change dependency to @tanstack/react-query (dropping react-query) and release it as major.

bgaleotti avatar Jul 24 '22 21:07 bgaleotti

If this is fine for you, then I am ok with this solution. I dont know how fast people will move to @tanstack/react-query, or if the v3 version will be maintained.

There should probably be a mention in the README that the new version only support v4, and which version to use for v3.

renchap avatar Jul 26 '22 09:07 renchap

We should probably have a flag to keep v3 for backwards compatibility.

gabimoncha avatar Aug 01 '22 11:08 gabimoncha

I added a demo application using @tanstack/react-query. Everything is working fine, but as @renchap mentioned, types are wrong (peerDependency as well) and I had to silence them. I still don't know how to handle both libraries at the same time, so I'm inclined to release a new version supporting only @tanstack/react-query.

bgaleotti avatar Nov 02 '22 13:11 bgaleotti