feat: placeholderData codemod (#6196)

* feat(codemod): add initial implementation of the `placeholderData` codemod

* chore(codemod): remove the parameter from the `placeholderData` function examples

It was a request by @TkDodo, since in `v4` the `placeholderData` function didn't have a parameter.

For further details see: #6196 (comment)

* chore(codemod): add an example where the `placeholderData` property is not a function

It was a request by @TkDodo, see: #6196 (comment)

* refactor(codemod): transform the usage only when the `keepPreviousData` has value `true`

---------

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

Author: balazsmatepetro

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

@@ -0,0 +1,90 @@
+import * as React from 'react'
+import axios from 'axios'
+import { useQueries, useQuery } from '@tanstack/react-query'
+
+type Post = {
+  id: number
+  title: string
+  body: string
+}
+
+const queryFn = async (): Promise<Array<Post>> => {
+  const { data } = await axios.get(
+    'https://jsonplaceholder.typicode.com/posts',
+  )
+  return data
+}
+
+/**
+ * The object expression has a `keepPreviousData` property with value `true`, so the codemod should transform
+ * this usage.
+ */
+export const Example1 = () => {
+  const { data } = useQuery({
+    queryKey: ['posts'],
+    queryFn: queryFn,
+    keepPreviousData: true,
+  })
+
+  return <div>{JSON.stringify(data)}</div>
+}
+
+/**
+ * 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 Example2 = () => {
+  const { data } = useQueries({
+    queryKey: ['posts'],
+    queryFn: queryFn,
+    keepPreviousData: true,
+    placeholderData: () => previousData
+  })
+
+  return <div>{JSON.stringify(data)}</div>
+}
+
+/**
+ * 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 Example3 = () => {
+  const { data } = useQueries({
+    queryKey: ['posts'],
+    queryFn: queryFn,
+    keepPreviousData: true,
+    placeholderData: "somePlaceholderData"
+  })
+
+  return <div>{JSON.stringify(data)}</div>
+}
+
+/**
+ * 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 Example4 = () => {
+  const { data } = useQueries({
+    queryKey: ['posts'],
+    queryFn: queryFn,
+    keepPreviousData: false,
+  })
+
+  return <div>{JSON.stringify(data)}</div>
+}
+
+/**
+ * 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 Example5 = () => {
+  const keepPreviousDataIdentifier = false
+  const { data } = useQueries({
+    queryKey: ['posts'],
+    queryFn: queryFn,
+    keepPreviousData: keepPreviousDataIdentifier,
+    placeholderData: () => previousData
+  })
+
+  return <div>{JSON.stringify(data)}</div>
+}

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

@@ -0,0 +1,90 @@
+import * as React from 'react'
+import axios from 'axios'
+import { keepPreviousData, useQueries, useQuery } from '@tanstack/react-query';
+
+type Post = {
+  id: number
+  title: string
+  body: string
+}
+
+const queryFn = async (): Promise<Array<Post>> => {
+  const { data } = await axios.get(
+    'https://jsonplaceholder.typicode.com/posts',
+  )
+  return data
+}
+
+/**
+ * The object expression has a `keepPreviousData` property with value `true`, so the codemod should transform
+ * this usage.
+ */
+export const Example1 = () => {
+  const { data } = useQuery({
+    queryKey: ['posts'],
+    queryFn: queryFn,
+    placeholderData: keepPreviousData
+  })
+
+  return <div>{JSON.stringify(data)}</div>
+}
+
+/**
+ * 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 Example2 = () => {
+  const { data } = useQueries({
+    queryKey: ['posts'],
+    queryFn: queryFn,
+    keepPreviousData: true,
+    placeholderData: () => previousData
+  })
+
+  return <div>{JSON.stringify(data)}</div>
+}
+
+/**
+ * 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 Example3 = () => {
+  const { data } = useQueries({
+    queryKey: ['posts'],
+    queryFn: queryFn,
+    keepPreviousData: true,
+    placeholderData: "somePlaceholderData"
+  })
+
+  return <div>{JSON.stringify(data)}</div>
+}
+
+/**
+ * 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 Example4 = () => {
+  const { data } = useQueries({
+    queryKey: ['posts'],
+    queryFn: queryFn,
+    keepPreviousData: false,
+  })
+
+  return <div>{JSON.stringify(data)}</div>
+}
+
+/**
+ * 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 Example5 = () => {
+  const keepPreviousDataIdentifier = false
+  const { data } = useQueries({
+    queryKey: ['posts'],
+    queryFn: queryFn,
+    keepPreviousData: keepPreviousDataIdentifier,
+    placeholderData: () => previousData
+  })
+
+  return <div>{JSON.stringify(data)}</div>
+}

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

@@ -0,0 +1,10 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const defineTest = require('jscodeshift/dist/testUtils').defineTest
+
+defineTest(__dirname, 'keep-previous-data', null, 'default', {
+  parser: 'tsx',
+})
+
+defineTest(__dirname, 'keep-previous-data', null, 'named', {
+  parser: 'tsx',
+})