fix(codemod): improve the keep previous data codemod (#6283)

* chore(codemod): add named examples to the `keep-previous-data` codemod, because these were missing

* chore(codemod): remove the unnecessary `return` statement

* feat(codemod): cover the `setQueryDefaults` method usages on the `QueryClient` instance with the codemod

For further details see: #6196 (comment)

* chore(codemod): rename the `isKeepPreviousDataInUse` to `shouldAddKeepPreviousDataImport`

The new name describes better the purpose of this variable.

* feat(codemod): cover the `QueryClient` class instantiations with the codemod

For further details see: #6196 (comment)

* chore(codemod): fix `eslint` issues within the `keep-previous-data` codemod

* chore(codemod): fix the `prettier` issues within the `keep-previous-data` codemod README file

* chore(codemod): turn off the `sort-imports` ESLint rule in case of the codemods

Since the codemods might not respect the import order, it's easier to turn off the `sort-imports` ESLint rule.

---------

Co-authored-by: Dominik Dorfmeister <[email protected]>

Author: balazsmatepetro

packages/codemods/.eslintrc.cjs

@@ -11,6 +11,7 @@ const config = {
       files: ['**/__testfixtures__/*'],
       rules: {
         'import/no-unresolved': 'off',
+        'sort-imports': 'off',
         '@typescript-eslint/no-unused-vars': 'off',
       },
     },

packages/codemods/src/v5/keep-previous-data/README.md

@@ -0,0 +1,32 @@
+### Intro
+
+The prerequisite for this code mod is to migrate your usages to the new syntax, so overloads for hooks and `QueryClient` methods shouldn't be available anymore.
+
+### Affected usages
+
+Please note, this code mod transforms usages only where the first argument is an object expression.
+
+The following usage should be transformed by the code mod:
+
+```ts
+const { data } = useQuery({
+  queryKey: ['posts'],
+  queryFn: queryFn,
+  keepPreviousData: true,
+})
+```
+
+But the following usage won't be transformed by the code mod, because the first argument an identifier:
+
+```ts
+const hookArgument = {
+  queryKey: ['posts'],
+  queryFn: queryFn,
+  keepPreviousData: true,
+}
+const { data } = useQuery(hookArgument)
+```
+
+### Troubleshooting
+
+In case of any errors, feel free to reach us out via Discord or open an issue. If you open an issue, please provide a code snippet as well, because without a snippet we cannot find the bug in the code mod.

packages/codemods/src/v5/keep-previous-data/__testfixtures__/default.input.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import axios from 'axios'
-import { useQueries, useQuery } from '@tanstack/react-query'
+import { QueryClient, useQueries, useQuery, useQueryClient } from '@tanstack/react-query'
 
 type Post = {
   id: number
@@ -53,7 +53,7 @@ export const Example3 = () => {
     queryKey: ['posts'],
     queryFn: queryFn,
     keepPreviousData: true,
-    placeholderData: "somePlaceholderData"
+    placeholderData: 'somePlaceholderData'
   })
 
   return <div>{JSON.stringify(data)}</div>
@@ -88,3 +88,197 @@ export const Example5 = () => {
 
   return <div>{JSON.stringify(data)}</div>
 }
+
+/**
+ * The object expression has a `keepPreviousData` property with value `true`, so the codemod should transform
+ * this usage.
+ */
+export const Example6 = () => {
+  const queryClient = new QueryClient()
+
+  queryClient.setQueryDefaults(['key'], {
+    keepPreviousData: true
+  })
+
+  useQueryClient().setQueryDefaults(['key'], {
+    keepPreviousData: true
+  })
+
+  const anotherQueryClient = useQueryClient()
+
+  anotherQueryClient.setQueryDefaults(['key'], {
+    keepPreviousData: true
+  })
+}
+
+/**
+ * The object expression has a `keepPreviousData` property with value `true`, but the `placeholderData` is a function.
+ * The codemod shouldn't transform this case, only warn the user about the manual migration.
+ */
+export const Example7 = () => {
+  const queryClient = new QueryClient()
+
+  queryClient.setQueryDefaults(['key'], {
+    keepPreviousData: true,
+    placeholderData: () => previousData
+  })
+
+  useQueryClient().setQueryDefaults(['key'], {
+    keepPreviousData: true,
+    placeholderData: () => previousData
+  })
+
+  const anotherQueryClient = useQueryClient()
+
+  anotherQueryClient.setQueryDefaults(['key'], {
+    keepPreviousData: true,
+    placeholderData: () => previousData
+  })
+}
+
+/**
+ * The object expression has a `keepPreviousData` property with value `true`, but the `placeholderData` is a string.
+ * The codemod shouldn't transform this case, only warn the user about the manual migration.
+ */
+export const Example8 = () => {
+  const queryClient = new QueryClient()
+
+  queryClient.setQueryDefaults(['key'], {
+    keepPreviousData: true,
+    placeholderData: 'somePlaceholderData'
+  })
+
+  useQueryClient().setQueryDefaults(['key'], {
+    keepPreviousData: true,
+    placeholderData: 'somePlaceholderData'
+  })
+
+  const anotherQueryClient = useQueryClient()
+
+  anotherQueryClient.setQueryDefaults(['key'], {
+    keepPreviousData: true,
+    placeholderData: 'somePlaceholderData'
+  })
+}
+
+/**
+ * The object expression has a `keepPreviousData` property with value `false`.
+ * The codemod shouldn't transform this case, only warn the user about the manual migration.
+ */
+export const Example9 = () => {
+  const queryClient = new QueryClient()
+
+  queryClient.setQueryDefaults(['key'], {
+    keepPreviousData: false,
+  })
+
+  useQueryClient().setQueryDefaults(['key'], {
+    keepPreviousData: false,
+  })
+
+  const anotherQueryClient = useQueryClient()
+
+  anotherQueryClient.setQueryDefaults(['key'], {
+    keepPreviousData: false,
+  })
+}
+
+/**
+ * The object expression has a `keepPreviousData` property with which is an identifier.
+ * The codemod shouldn't transform this case, only warn the user about the manual migration.
+ */
+export const Example10 = () => {
+  const queryClient = new QueryClient()
+  const keepPreviousDataIdentifier = false
+
+  queryClient.setQueryDefaults(['key'], {
+    keepPreviousData: keepPreviousDataIdentifier,
+    placeholderData: () => previousData
+  })
+
+  useQueryClient().setQueryDefaults(['key'], {
+    keepPreviousData: keepPreviousDataIdentifier,
+    placeholderData: () => previousData
+  })
+
+  const anotherQueryClient = useQueryClient()
+
+  anotherQueryClient.setQueryDefaults(['key'], {
+    keepPreviousData: keepPreviousDataIdentifier,
+    placeholderData: () => previousData
+  })
+}
+
+/**
+ * The object expression has a `keepPreviousData` property with value `true`, so the codemod should transform
+ * this usage.
+ */
+export const Example11 = () => {
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        keepPreviousData: true
+      }
+    }
+  })
+}
+
+/**
+ * The object expression has a `keepPreviousData` property with value `true`, but the `placeholderData` is a function.
+ * The codemod shouldn't transform this case, only warn the user about the manual migration.
+ */
+export const Example12 = () => {
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        keepPreviousData: true,
+        placeholderData: () => previousData
+      }
+    }
+  })
+}
+
+/**
+ * The object expression has a `keepPreviousData` property with value `true`, but the `placeholderData` is a string.
+ * The codemod shouldn't transform this case, only warn the user about the manual migration.
+ */
+export const Example13 = () => {
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        keepPreviousData: true,
+        placeholderData: 'somePlaceholderData'
+      }
+    }
+  })
+}
+
+/**
+ * The object expression has a `keepPreviousData` property with value `false`.
+ * The codemod shouldn't transform this case, only warn the user about the manual migration.
+ */
+export const Example14 = () => {
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        keepPreviousData: false,
+      }
+    }
+  })
+}
+
+/**
+ * The object expression has a `keepPreviousData` property with which is an identifier.
+ * The codemod shouldn't transform this case, only warn the user about the manual migration.
+ */
+export const Example15 = () => {
+  const keepPreviousDataIdentifier = false
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        keepPreviousData: keepPreviousDataIdentifier,
+        placeholderData: () => previousData
+      }
+    }
+  })
+}