Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/codemods/.eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const config = {
files: ['**/__testfixtures__/*'],
rules: {
'import/no-unresolved': 'off',
'sort-imports': 'off',
'@typescript-eslint/no-unused-vars': 'off',
},
},
Expand Down
32 changes: 32 additions & 0 deletions packages/codemods/src/v5/keep-previous-data/README.md
Original file line number Diff line number Diff line change
@@ -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.
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -53,7 +53,7 @@ export const Example3 = () => {
queryKey: ['posts'],
queryFn: queryFn,
keepPreviousData: true,
placeholderData: "somePlaceholderData"
placeholderData: 'somePlaceholderData'
})

return <div>{JSON.stringify(data)}</div>
Expand Down Expand Up @@ -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
}
}
})
}
Loading