chore: start react query v4 upgrade (#2338)

react query -> tanstack query v4 migration
dailydotdev · Nov 22, 2023 · dfa9706 · dfa9706
1 parent 9a44244
commit dfa9706
Show file tree

Hide file tree

Showing 216 changed files with 1,676 additions and 859 deletions.
diff --git a/.idea/daily-webapp.iml b/.idea/daily-webapp.iml
diff --git a/packages/extension/__tests__/setup.ts b/packages/extension/__tests__/setup.ts
@@ -7,8 +7,6 @@ import { NextRouter } from 'next/router';
 
 process.env.NEXT_PUBLIC_API_URL = 'http://localhost:3000';
 process.env.NEXT_PUBLIC_WEBAPP_URL = 'https://app.daily.dev/';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-// window.ga = ((...args) => {}) as UniversalAnalytics.ga;
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 

diff --git a/packages/extension/babel.config.js b/packages/extension/babel.config.js
@@ -1,48 +1,34 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+module.exports = (api) => {
+  const isTest = api.env('test');
+  api.cache(true);
 
-module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        useBuiltIns: false,
-        // Do not transform modules to CJS
-        modules: false,
-        targets: {
-          chrome: '49',
-          firefox: '52',
-          opera: '36',
-          edge: '79',
-        },
-      },
-    ],
-    '@babel/typescript',
-    '@babel/react',
-  ],
-  plugins: [
-    [
-      // Polyfills the runtime needed for async/await and generators
-      '@babel/plugin-transform-runtime',
-      {
-        helpers: false,
-        regenerator: true,
-      },
-    ],
-  ],
-  env: {
-    production: {
-      plugins: [
+  // remove this part when https://github.com/vercel/next.js/issues/24566 is closed
+  if (isTest) {
+    return {
+      presets: [
+        '@babel/preset-env',
+        '@babel/preset-typescript',
         [
-          'react-remove-properties',
+          '@babel/preset-react',
           {
-            properties: ['data-testid'],
+            runtime: 'automatic',
           },
         ],
       ],
+      env: {
+        test: {
+          presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
+        },
+      },
+    };
+  }
+
+  return {
+    presets: ['next/babel'],
+    env: {
+      test: {
+        plugins: ['dynamic-import-node'],
+      },
     },
-    test: {
-      plugins: ['dynamic-import-node'],
-      presets: ['@babel/preset-env', '@babel/typescript', '@babel/react'],
-    },
-  },
+  };
 };
diff --git a/packages/extension/jest.config.js b/packages/extension/jest.config.js
@@ -9,7 +9,7 @@ module.exports = {
     '<rootDir>/__tests__/helpers/',
     '<rootDir>/__tests__/fixture/',
   ],
-  transformIgnorePatterns: ['node_modules/(?!@dailydotdev)'],
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!@dailydotdev)'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   moduleNameMapper: {
     '\\.svg$': '<rootDir>/__mocks__/svgrMock.ts',

diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -18,7 +18,6 @@
   },
   "prettier": "@dailydotdev/prettier-config",
   "dependencies": {
-    "@babel/runtime": "^7.17.9",
     "@dailydotdev/react-contexify": "^5.0.2",
     "@dailydotdev/shared": "*",
     "classnames": "^2.3.1",
@@ -35,17 +34,16 @@
     "react-dom": "17.0.2",
     "react-intersection-observer": "^8.34.0",
     "react-modal": "^3.15.1",
-    "react-query": "3.39.1",
+    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query-devtools": "^4.35.3",
     "react-swipeable": "^6.2.2",
     "react-tooltip": "^4.2.21",
     "react-transition-group": "^4.4.2",
     "react-virtual": "^2.10.4",
     "webextension-polyfill-ts": "^0.22.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
     "@dailydotdev/eslint-config": "*",

diff --git a/packages/extension/src/companion/App.tsx b/packages/extension/src/companion/App.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement, useState } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { browser } from 'webextension-polyfill-ts';
 import { Boot, BootApp } from '@dailydotdev/shared/src/lib/boot';
 import { AuthContextProvider } from '@dailydotdev/shared/src/contexts/AuthContext';
@@ -17,7 +17,7 @@ import {
   getCompanionWrapper,
 } from '@dailydotdev/shared/src/lib/extension';
 import { defaultQueryClientConfig } from '@dailydotdev/shared/src/lib/query';
-import { ReactQueryDevtools } from 'react-query/devtools';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { PromptElement } from '@dailydotdev/shared/src/components/modals/Prompt';
 import { GrowthBookProvider } from '@dailydotdev/shared/src/components/GrowthBookProvider';
 import { NotificationsContextProvider } from '@dailydotdev/shared/src/contexts/NotificationsContext';

diff --git a/packages/extension/src/companion/Companion.tsx b/packages/extension/src/companion/Companion.tsx
@@ -7,7 +7,7 @@ import React, {
   LegacyRef,
   useCallback,
 } from 'react';
-import { useQuery, useQueryClient } from 'react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import classNames from 'classnames';
 import Modal from 'react-modal';
 import { isTesting } from '@dailydotdev/shared/src/lib/constants';
@@ -68,7 +68,7 @@ const Container = ({
   );
 };
 
-export const refreshTokenKey = 'refresh_token';
+export const refreshTokenKey = ['refresh_token'];
 
 export default function Companion({
   postData,

diff --git a/packages/extension/src/companion/CompanionEngagements.tsx b/packages/extension/src/companion/CompanionEngagements.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import { PostBootData } from '@dailydotdev/shared/src/lib/boot';
 import { ClickableText } from '@dailydotdev/shared/src/components/buttons/ClickableText';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { useRawBackgroundRequest } from '@dailydotdev/shared/src/hooks/companion';
 
 interface CompanionEngagementsProps {

diff --git a/packages/extension/src/companion/CompanionPermission.spec.tsx b/packages/extension/src/companion/CompanionPermission.spec.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import '@testing-library/jest-dom';
 import { render, RenderResult, screen } from '@testing-library/react';
 import { companionExplainerVideo } from '@dailydotdev/shared/src/lib/constants';
-import { EXTENSION_PERMISSION_KEY } from '@dailydotdev/shared/src/hooks';
+import {
+  contentScriptKey,
+  EXTENSION_PERMISSION_KEY,
+} from '@dailydotdev/shared/src/hooks';
 import { CompanionPermission } from './CompanionPermission';
 import {
   registerBrowserContentScripts,
@@ -92,11 +95,10 @@ describe('companion permission component', () => {
 
   it('should ask for permission when button is clicked', async () => {
     renderComponent();
-    const key = 'permission_key';
-    expect(client.getQueryData(key)).toBeFalsy();
+    expect(client.getQueryData(contentScriptKey)).toBeFalsy();
     const button = await screen.findByRole('button');
     expect(button).toBeInTheDocument();
     await button.click();
-    expect(client.getQueryData(key)).toEqual(true);
+    expect(client.getQueryData(contentScriptKey)).toEqual(true);
   });
 });
diff --git a/packages/extension/src/companion/useBackgroundPaginatedRequest.ts b/packages/extension/src/companion/useBackgroundPaginatedRequest.ts
@@ -1,4 +1,4 @@
-import { QueryKey, useQueryClient, InfiniteData } from 'react-query';
+import { QueryKey, useQueryClient, InfiniteData } from '@tanstack/react-query';
 import { useBackgroundRequest } from '@dailydotdev/shared/src/hooks/companion';
 
 export const useBackgroundPaginatedRequest = <T extends InfiniteData<unknown>>(

diff --git a/packages/extension/src/companion/useCompanionActions.ts b/packages/extension/src/companion/useCompanionActions.ts
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { browser } from 'webextension-polyfill-ts';
 import { graphqlUrl } from '@dailydotdev/shared/src/lib/config';
 import {

diff --git a/packages/extension/src/newtab/App.tsx b/packages/extension/src/newtab/App.tsx
@@ -5,7 +5,11 @@ import React, {
   useEffect,
   useRef,
 } from 'react';
-import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from '@tanstack/react-query';
 import dynamic from 'next/dynamic';
 import Modal from 'react-modal';
 import 'focus-visible';
@@ -28,7 +32,7 @@ import { useNotificationContext } from '@dailydotdev/shared/src/contexts/Notific
 import { useLazyModal } from '@dailydotdev/shared/src/hooks/useLazyModal';
 import { usePrompt } from '@dailydotdev/shared/src/hooks/usePrompt';
 import { defaultQueryClientConfig } from '@dailydotdev/shared/src/lib/query';
-import { ReactQueryDevtools } from 'react-query/devtools';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { useWebVitals } from '@dailydotdev/shared/src/hooks/useWebVitals';
 import { useGrowthBookContext } from '@dailydotdev/shared/src/components/GrowthBookProvider';
 import { isTesting } from '@dailydotdev/shared/src/lib/constants';

diff --git a/packages/extension/src/newtab/ShortcutLinks.spec.tsx b/packages/extension/src/newtab/ShortcutLinks.spec.tsx
@@ -10,7 +10,7 @@ import {
   waitForElementToBeRemoved,
 } from '@testing-library/react';
 import { mocked } from 'ts-jest/utils';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { mockGraphQL } from '@dailydotdev/shared/__tests__/helpers/graphql';
 import { waitForNock } from '@dailydotdev/shared/__tests__/helpers/utilities';
 import {

diff --git a/packages/shared/__tests__/helpers/boot.tsx b/packages/shared/__tests__/helpers/boot.tsx
@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import React, { ReactElement, ReactNode } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react';
 import AuthContext, { AuthContextData } from '../../src/contexts/AuthContext';
 import OnboardingContext from '../../src/contexts/OnboardingContext';

diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -14,6 +14,8 @@
   "prettier": "@dailydotdev/prettier-config",
   "peerDependencies": {
     "@dailydotdev/react-contexify": "^5.0.2",
+    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query-devtools": "^4.35.3",
     "classnames": "^2.3.1",
     "date-fns": "^2.22.1",
     "date-fns-tz": "1.0.0",
@@ -26,7 +28,6 @@
     "react-dom": "^17.0.2",
     "react-intersection-observer": "^8.31.0",
     "react-modal": "^3.14.3",
-    "react-query": "3.39.1",
     "react-swipeable": "^6.2.0",
     "react-transition-group": "^4.4.2",
     "react-virtual": "^2.8.0"
@@ -39,6 +40,8 @@
     "@dailydotdev/eslint-plugin-daily-dev-eslint-rules": "*",
     "@dailydotdev/prettier-config": "*",
     "@dailydotdev/react-contexify": "^5.0.0",
+    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query-devtools": "^4.35.3",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
@@ -54,6 +57,7 @@
     "@types/react-modal": "^3.13.1",
     "@types/react-router-dom": "^5.3.2",
     "@types/react-syntax-highlighter": "^15.5.7",
+    "@types/testing-library__jest-dom": "^5.14.6",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "autoprefixer": "^10.4.2",
@@ -97,7 +101,6 @@
     "react-dom": "17.0.2",
     "react-intersection-observer": "^8.32.2",
     "react-modal": "^3.14.3",
-    "react-query": "3.39.1",
     "react-swipeable": "^6.2.0",
     "react-transition-group": "^4.4.2",
     "react-virtual": "^2.8.2",

diff --git a/packages/shared/src/components/Feed.spec.tsx b/packages/shared/src/components/Feed.spec.tsx
@@ -10,7 +10,7 @@ import {
   waitFor,
   within,
 } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { OperationOptions } from 'subscriptions-transport-ws';
 import {
   ADD_BOOKMARKS_MUTATION,

diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx
@@ -6,7 +6,7 @@ import React, {
   useMemo,
 } from 'react';
 import dynamic from 'next/dynamic';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import useFeed, { PostItem, UseFeedOptionalParams } from '../hooks/useFeed';
 import { Ad, Post, PostType } from '../graphql/posts';
 import AuthContext from '../contexts/AuthContext';

diff --git a/packages/shared/src/components/GrowthBookProvider.tsx b/packages/shared/src/components/GrowthBookProvider.tsx
@@ -8,7 +8,7 @@ import React, {
   createContext,
   useMemo,
 } from 'react';
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import {
   Context,
   GrowthBook,

diff --git a/packages/shared/src/components/PostOptionsMenu.tsx b/packages/shared/src/components/PostOptionsMenu.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement, useContext } from 'react';
 import { Item } from '@dailydotdev/react-contexify';
 import dynamic from 'next/dynamic';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import classNames from 'classnames';
 import useFeedSettings from '../hooks/useFeedSettings';

diff --git a/packages/shared/src/components/PostOptionsReadingHistoryMenu.tsx b/packages/shared/src/components/PostOptionsReadingHistoryMenu.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement, useContext } from 'react';
 import classNames from 'classnames';
 import { Item } from '@dailydotdev/react-contexify';
 import dynamic from 'next/dynamic';
-import { QueryClient, QueryKey, useQueryClient } from 'react-query';
+import { QueryClient, QueryKey, useQueryClient } from '@tanstack/react-query';
 import { ReadHistoryPost } from '../graphql/posts';
 import ShareIcon from './icons/Share';
 import BookmarkIcon from './icons/Bookmark';

diff --git a/packages/shared/src/components/PostsSearch.tsx b/packages/shared/src/components/PostsSearch.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement, useEffect, useRef, useState } from 'react';
 import dynamic from 'next/dynamic';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import request from 'graphql-request';
 import classNames from 'classnames';
 import { SearchField } from './fields/SearchField';

diff --git a/packages/shared/src/components/Settings.spec.tsx b/packages/shared/src/components/Settings.spec.tsx
@@ -8,7 +8,7 @@ import {
   screen,
   waitFor,
 } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { mockGraphQL } from '../../__tests__/helpers/graphql';
 import { SettingsContextProvider } from '../contexts/SettingsContext';
 import Settings from './Settings';

diff --git a/packages/shared/src/components/ShareBar.spec.tsx b/packages/shared/src/components/ShareBar.spec.tsx
@@ -1,5 +1,5 @@
 import { render, RenderResult, screen, waitFor } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 import nock from 'nock';
 import { useRouter } from 'next/router';

diff --git a/packages/shared/src/components/SidebarRankProgress.spec.tsx b/packages/shared/src/components/SidebarRankProgress.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, RenderResult, screen, waitFor } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import nock from 'nock';
 import { set as setCache } from 'idb-keyval';
 import { useRouter, NextRouter } from 'next/router';

diff --git a/packages/shared/src/components/auth/AuthDefault.tsx b/packages/shared/src/components/auth/AuthDefault.tsx
@@ -5,7 +5,7 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { checkKratosEmail } from '../../lib/kratos';
 import AuthModalFooter from './AuthModalFooter';
 import { AuthFormProps, Provider, getFormEmail } from './common';

diff --git a/packages/shared/src/components/auth/AuthOptions.tsx b/packages/shared/src/components/auth/AuthOptions.tsx
@@ -171,7 +171,7 @@ function AuthOptions({
     validateRegistration,
     onSocialRegistration,
   } = useRegistration({
-    key: 'registration_form',
+    key: ['registration_form'],
     onValidRegistration: async () => {
       setIsRegistration(true);
       const { data } = await refetchBoot();