react-query is deprecated

[Byeong-jun-Kim]

react-query(https://www.npmjs.com/package/react-query) is deprecated. And there is new package @tanstack/react-query(https://www.npmjs.com/package/@tanstack/react-query). When can we upgrade it?

[fzaninotto]

Yes, we've seen, and this is really bothering. We've invested heavily in react-query, and the author deprecates it without prior notice. It's not a good OSS practice IMHO.

The upgrade to tanstack query isn't hard at all, but it's a breaking change, as any application based on react-admin using react-query's useQuery will break. As we're following semver, upgrading to tanstack query would mean releasing a new major version (react-admin v5). We schedule major versions every 1,5 to 2 years, so that our users don't have to do some useless migration work too often. The last major version is only a few months old, so we can't release a new major version before 2024.

So I see 3 possibilities:

1. We do release a major version anyway, at the risk of losing some users who get tired of upgrading too often
2. We release the change from react query to tanstack query in a minor version, which is a breach of semver, but acceptable as the upgrade is really quick (search & replace)
3. We wait 1,5 to 2 years to make the switch, and new developers get discouraged by the fact that we use a deprecated dependency.

I'll let this issue open to let the community express their preference.

[Byeong-jun-Kim]

Thank you for your quick reply!

[fzaninotto]

It appears that react-query is NOT deprecated. See the author comment here: https://github.com/TanStack/query/issues/3917

So we don't have to upgrade anytime soon - which pushes me to solution 3.

[TkDodo]

Let me just question why a major upgrade of a 3rd party lib would automatically lead to a major version on your end? Unless you are deliberately forwarding the react-query api 1:1 to your users, in which case I would think you have paid close attention to the react-query development, as it's in your best interest. v4 has been in beta for about 6 months now and we have announced that it will be released as TanStack query.

The breaking changes are not that much so I think you could also e.g. not forward the options 1:1, but have a wrapper that e.g. transforms the non-working string query keys to Arrays.

[fzaninotto]

Let me just question why a major upgrade of a 3rd party lib would automatically lead to a major version on your end?

Because an app using useQuery as explained in the documentation:

import * as React from "react";
import { useQuery } from 'react-query';
import { useDataProvider, Loading, Error } from 'react-admin';

const UserProfile = ({ userId }) => {
    const dataProvider = useDataProvider();
    const { data, isLoading, error } = useQuery(
        ['users', 'getOne', { id: userId }], 
        () => dataProvider.getOne('users', { id: userId })
    );

    if (isLoading) return <Loading />;
    if (error) return <Error />;
    if (!data) return null;

    return (
        <ul>
            <li>Name: {data.name}</li>
            <li>Email: {data.email}</li>
        </ul>
    )
};

Will fail if react-admin decides to use the QueryClient from @tanstack/react-query. Different libraries, different contexts.

So this is a breaking change.

We don't use string query keys - we already use arrays everywhere. The problem is that the following change, although easy, is NOT backwards compatible:

-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';

[smeng9]

-1 on option 1 If the react-query v3 is completely abandoned, I would vote for option 2 If the react-query v3 still receives security and bug fixes for older versions, I would vote for option 3

[bhaskarmurthy]

We're facing the same problem here - despite the library not being deprecated, still seeing errors in CI when building an app using react-admin

Module not found: Error: Can't resolve 'react-query' in '/vercel/path0/node_modules/@react-admin/ra-navigation/esm/src/app-location'

FYI we subscribe to react-admin enterprise, and this looks like an error from one of the private modules. Do we have a roadmap or timeline for when this will be resolved?

package.json
  "dependencies": {
    "@hookform/resolvers": "2.8.10",
    "@react-admin/ra-navigation": "4.1.1",
    "firebase": "9.8.1",
    "js-cookie": "3.0.1",
    "ra-i18n-polyglot": "4.2.4",
    "ra-language-english": "4.2.4",
    "react": "17.0.2",
    "react-admin": "^4.2.4",
    "react-dom": "17.0.2",
    "react-hook-form": "7.31.1",
    "react-router-dom": "6.2.2",
    "web-vitals": "2.1.4",
    "yup": "0.32.11"
  },

yarn why v1.22.19
[1/4] 🤔  Why do we have the module "react-query"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#admin-web#ra-i18n-polyglot#ra-core" depends on it
   - Hoisted from "_project_#admin-web#ra-i18n-polyglot#ra-core#react-query"
   - Hoisted from "_project_#admin-web#react-admin#ra-ui-materialui#react-query"
✨  Done in 0.47s.

If i remove all references to ra-navigation, the build succeeds, but I get this error at runtime:

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:209
react.development.js:1650 Uncaught TypeError: Cannot read properties of null (reading 'useMemo')
    at useMemo (react.development.js:1650:1)
    at CoreAdminContext (CoreAdminContext.js:16:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)

Stepping into that stack trace shows me this code as the line in CoreAdminContext:

import { QueryClientProvider, QueryClient } from 'react-query';
...
export var CoreAdminContext = function (props) {
    var authProvider = props.authProvider, basename = props.basename, dataProvider = props.dataProvider, i18nProvider = props.i18nProvider, store = props.store, children = props.children, history = props.history, queryClient = props.queryClient;
    ...
    var finalQueryClient = useMemo(function () { return queryClient || new QueryClient(); }, [
        queryClient,

Looks like new QueryClient() is returning null as there's no query client passed in (as expected since we're not instantiating react-query in our app)

[osseonews]

This thread brings up the basic reason why I'm tiring of React frontend development. The problem is that by the time you finish a project and it works well, some major dependency is upgraded for no particular reason and it is not backwards compatible. Development has simply become impossibly complex, as too many related packages are constantly changing.

Anyhow, I think React-Admin is the single best frontend solution out there, so your best option, in my opinion, is not to upgrade at all (option 3) and just keep building on what you have because it works really well. I don't think anyone will get discouraged if you are working off of a deprecated dependency, because React-Admin works, and works well. Maybe just fork query and develop your own fixes/improvements internally. Ultimately, people (at least I speak for myself) develop on React-Admin because they don't want to worry about all these other dependencies. So you are best decoupling now, and not disrupt this amazing project in any way.

[fzaninotto]

The react-query team has changed the "latest" tag so there is no deprecation anymore:

https://www.npmjs.com/package/react-query

[Nickman87]

I came upon this issue as I am using both TRPC and react-admin and now have an incompatibility between the two react-query dependencies (TRPC is using @tanstack/react-query while react-admin is using react-query).

This is not a show stopping issue, as you can have both versions running in parallel, but this does limit the options to integrate with for example the LoadingIndicator while doing queries trough TRPC. This does not seem like a very hard upgrade path for user to take, IF they don't have a lot of other dependencies that require one or the other version of react-query...