chore(examples): apply codemod on the examples directory

examples/auto-refetching/pages/index.js

@@ -28,7 +28,7 @@ function Example() {
   const [value, setValue] = React.useState('')
 
   const { status, data, error, isFetching } = useQuery(
-    'todos',
+    ['todos'],
     async () => {
       const res = await axios.get('/api/data')
       return res.data
@@ -40,11 +40,11 @@ function Example() {
   )
 
   const addMutation = useMutation(value => fetch(`/api/data?add=${value}`), {
-    onSuccess: () => queryClient.invalidateQueries('todos'),
+    onSuccess: () => queryClient.invalidateQueries(['todos']),
   })
 
   const clearMutation = useMutation(() => fetch(`/api/data?clear=1`), {
-    onSuccess: () => queryClient.invalidateQueries('todos'),
+    onSuccess: () => queryClient.invalidateQueries(['todos']),
   })
 
   if (status === 'loading') return <h1>Loading...</h1>

examples/basic-graphql-request/src/index.js

@@ -40,7 +40,7 @@ function App() {
 }
 
 function usePosts() {
-  return useQuery("posts", async () => {
+  return useQuery(['posts'], async () => {
     const {
       posts: { data },
     } = await request(

examples/custom-hooks/src/hooks/usePosts.js

@@ -9,5 +9,5 @@ const getPosts = async () => {
 };
 
 export default function usePosts() {
-  return useQuery("posts", getPosts);
+  return useQuery(['posts'], getPosts);
 }

examples/default-query-function/src/index.js

@@ -56,7 +56,7 @@ function Posts({ setPostId }) {
   const queryClient = useQueryClient();
 
   // All you have to do now is pass a key!
-  const { status, data, error, isFetching } = useQuery("/posts");
+  const { status, data, error, isFetching } = useQuery(['/posts']);
 
   return (
     <div>
@@ -100,7 +100,7 @@ function Posts({ setPostId }) {
 
 function Post({ postId, setPostId }) {
   // You can even leave out the queryFn and just go straight into options
-  const { status, data, error, isFetching } = useQuery(`/posts/${postId}`, {
+  const { status, data, error, isFetching } = useQuery([`/posts/${postId}`], {
     enabled: !!postId,
   });
 

examples/focus-refetching/pages/index.js

@@ -23,17 +23,17 @@ export default function App() {
 function Example() {
   const queryClient = useQueryClient()
 
-  const { status, data, error } = useQuery('user', async () => {
+  const { status, data, error } = useQuery(['user'], async () => {
     const res = await axios.get('/api/user')
     return res.data
   })
 
   const logoutMutation = useMutation(logout, {
-    onSuccess: () => queryClient.invalidateQueries('user'),
+    onSuccess: () => queryClient.invalidateQueries(['user']),
   })
 
   const loginMutation = useMutation(login, {
-    onSuccess: () => queryClient.invalidateQueries('user'),
+    onSuccess: () => queryClient.invalidateQueries(['user']),
   })
 
   return (

examples/load-more-infinite-scroll/pages/index.js

@@ -32,7 +32,7 @@ function Example() {
     hasNextPage,
     hasPreviousPage,
   } = useInfiniteQuery(
-    'projects',
+    ['projects'],
     async ({ pageParam = 0 }) => {
       const res = await axios.get('/api/projects?cursor=' + pageParam)
       return res.data

examples/optimistic-updates-typescript/pages/index.tsx

@@ -29,7 +29,7 @@ async function fetchTodos(): Promise<Todos> {
 function useTodos<TData = Todos>(
   options?: UseQueryOptions<Todos, AxiosError, TData>
 ) {
-  return useQuery('todos', fetchTodos, options)
+  return useQuery(['todos'], fetchTodos, options)
 }
 
 function TodoCounter() {
@@ -59,14 +59,14 @@ function Example() {
       onMutate: async (newTodo: string) => {
         setText('')
         // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
-        await queryClient.cancelQueries('todos')
+        await queryClient.cancelQueries(['todos'])
 
         // Snapshot the previous value
-        const previousTodos = queryClient.getQueryData<Todos>('todos')
+        const previousTodos = queryClient.getQueryData<Todos>(['todos'])
 
         // Optimistically update to the new value
         if (previousTodos) {
-          queryClient.setQueryData<Todos>('todos', {
+          queryClient.setQueryData<Todos>(['todos'], {
             ...previousTodos,
             items: [
               ...previousTodos.items,
@@ -80,12 +80,12 @@ function Example() {
       // If the mutation fails, use the context returned from onMutate to roll back
       onError: (err, variables, context) => {
         if (context?.previousTodos) {
-          queryClient.setQueryData<Todos>('todos', context.previousTodos)
+          queryClient.setQueryData<Todos>(['todos'], context.previousTodos)
         }
       },
       // Always refetch after error or success:
       onSettled: () => {
-        queryClient.invalidateQueries('todos')
+        queryClient.invalidateQueries(['todos'])
       },
     }
   )

examples/optimistic-updates/pages/index.js

@@ -24,7 +24,7 @@ function Example() {
   const queryClient = useQueryClient()
   const [text, setText] = React.useState('')
 
-  const { status, data, error, isFetching } = useQuery('todos', async () => {
+  const { status, data, error, isFetching } = useQuery(['todos'], async () => {
     const res = await axios.get('/api/data')
     return res.data
   })
@@ -37,11 +37,11 @@ function Example() {
       // an error
       onMutate: async text => {
         setText('')
-        await queryClient.cancelQueries('todos')
+        await queryClient.cancelQueries(['todos'])
 
-        const previousValue = queryClient.getQueryData('todos')
+        const previousValue = queryClient.getQueryData(['todos'])
 
-        queryClient.setQueryData('todos', old => ({
+        queryClient.setQueryData(['todos'], old => ({
           ...old,
           items: [...old.items, text],
         }))
@@ -50,10 +50,10 @@ function Example() {
       },
       // On failure, roll back to the previous value
       onError: (err, variables, previousValue) =>
-        queryClient.setQueryData('todos', previousValue),
+        queryClient.setQueryData(['todos'], previousValue),
       // After success or failure, refetch the todos query
       onSettled: () => {
-        queryClient.invalidateQueries('todos')
+        queryClient.invalidateQueries(['todos'])
       },
     }
   )

examples/playground/src/index.js

@@ -254,7 +254,7 @@ function EditTodo({ editingIndex, setEditingIndex }) {
   const saveMutation = useMutation(patchTodo, {
     onSuccess: (data) => {
       // Update `todos` and the individual todo queries when this mutation succeeds
-      queryClient.invalidateQueries("todos");
+      queryClient.invalidateQueries(['todos']);
       queryClient.setQueryData(["todo", { id: editingIndex }], data);
     },
   });
@@ -340,7 +340,7 @@ function AddTodo() {
 
   const addMutation = useMutation(postTodo, {
     onSuccess: () => {
-      queryClient.invalidateQueries("todos");
+      queryClient.invalidateQueries(['todos']);
     },
   });
 

examples/prefetching/pages/index.js

@@ -37,7 +37,7 @@ function Example() {
   const rerender = React.useState(0)[1]
   const [selectedChar, setSelectedChar] = React.useState(1)
 
-  const charactersQuery = useQuery('characters', getCharacters)
+  const charactersQuery = useQuery(['characters'], getCharacters)
 
   const characterQuery = useQuery(['character', selectedChar], () =>
     getCharacter(selectedChar)

examples/rick-morty/src/Character.js

@@ -17,7 +17,7 @@ import fetch from "./fetch";
 
 function Character() {
   const { characterId } = useParams();
-  const { status, data } = useQuery(`character-${characterId}`, () =>
+  const { status, data } = useQuery([`character-${characterId}`], () =>
     fetch(`https://rickandmortyapi.com/api/character/${characterId}`)
   );
 
@@ -77,7 +77,7 @@ function Character() {
 }
 
 function Episode({ id }) {
-  const { data, status } = useQuery(`episode-${id}`, () =>
+  const { data, status } = useQuery([`episode-${id}`], () =>
     fetch(`https://rickandmortyapi.com/api/episode/${id}`)
   );
 
@@ -97,7 +97,7 @@ function Episode({ id }) {
 }
 
 function Location({ id }) {
-  const { data, status } = useQuery(`location-${id}`, () =>
+  const { data, status } = useQuery([`location-${id}`], () =>
     fetch(`https://rickandmortyapi.com/api/location/${id}`)
   );
 

examples/rick-morty/src/Characters.js

@@ -5,7 +5,7 @@ import { useQuery } from "react-query";
 import fetch from "./fetch";
 
 export default function Characters() {
-  const { status, data } = useQuery("characters", () =>
+  const { status, data } = useQuery(["characters"], () =>
     fetch("https://rickandmortyapi.com/api/character/")
   );
 

examples/rick-morty/src/Episode.js

@@ -7,7 +7,7 @@ import fetch from "./fetch";
 
 function Episode() {
   const { episodeId } = useParams();
-  const { data, status } = useQuery(`episode-${episodeId}`, () =>
+  const { data, status } = useQuery([`episode-${episodeId}`], () =>
     fetch(`https://rickandmortyapi.com/api/episode/${episodeId}`)
   );
 
@@ -30,7 +30,7 @@ function Episode() {
 }
 
 function Character({ id }) {
-  const { data, status } = useQuery(`character-${id}`, () =>
+  const { data, status } = useQuery([`character-${id}`], () =>
     fetch(`https://rickandmortyapi.com/api/character/${id}`)
   );
 

examples/rick-morty/src/Episodes.js

@@ -5,7 +5,7 @@ import { useQuery } from "react-query";
 import fetch from "./fetch";
 
 export default function Episodes() {
-  const { data, status } = useQuery("episodes", () =>
+  const { data, status } = useQuery(["episodes"], () =>
     fetch("https://rickandmortyapi.com/api/episode")
   );
 

examples/simple/src/index.js

@@ -15,7 +15,7 @@ export default function App() {
 }
 
 function Example() {
-  const { isLoading, error, data, isFetching } = useQuery("repoData", () =>
+  const { isLoading, error, data, isFetching } = useQuery(["repoData"], () =>
     fetch(
       "https://api.github.com/repos/tannerlinsley/react-query"
     ).then((res) => res.json())

examples/star-wars/src/Character.js

@@ -17,7 +17,7 @@ import fetch from "./fetch";
 
 function Character(props) {
   const characterId = props.match.params.characterId;
-  const { status, error, data } = useQuery(`character-${characterId}`, () =>
+  const { status, error, data } = useQuery([`character-${characterId}`], () =>
     fetch(`https://swapi.dev/api/people/${characterId}/`)
   );
 
@@ -85,7 +85,7 @@ function Character(props) {
 
 function Film(props) {
   const { id } = props;
-  const { data, status, error } = useQuery(`film-${id}`, () =>
+  const { data, status, error } = useQuery([`film-${id}`], () =>
     fetch(`https://swapi.dev/api/films/${id}/`)
   );
 
@@ -105,7 +105,7 @@ function Film(props) {
 
 function Homeworld(props) {
   const { id } = props;
-  const { data, status } = useQuery(`homeworld-${id}`, () =>
+  const { data, status } = useQuery([`homeworld-${id}`], () =>
     fetch(`https://swapi.dev/api/planets/${id}/`)
   );
 

examples/star-wars/src/Characters.js

@@ -5,7 +5,7 @@ import { useQuery } from "react-query";
 import fetch from "./fetch";
 
 export default function Characters(props) {
-  const { status, error, data } = useQuery("characters", () =>
+  const { status, error, data } = useQuery(["characters"], () =>
     fetch(`https://swapi.dev/api/people/`)
   );
 

examples/star-wars/src/Film.js

@@ -7,7 +7,7 @@ import fetch from "./fetch";
 
 function Film(props) {
   const filmId = props.match.params.filmId;
-  const { data, status, error } = useQuery(`film-${filmId}`, () =>
+  const { data, status, error } = useQuery([`film-${filmId}`], () =>
     fetch(`https://swapi.dev/api/films/${filmId}/`)
   );
 
@@ -35,7 +35,7 @@ function Film(props) {
 
 function Character(props) {
   const { id } = props;
-  const { data, status, error } = useQuery(`character-${id}`, () =>
+  const { data, status, error } = useQuery([`character-${id}`], () =>
     fetch(`https://swapi.dev/api/people/${props.id}/`)
   );
 

examples/star-wars/src/Films.js

@@ -5,7 +5,7 @@ import { useQuery } from "react-query";
 import fetch from "./fetch";
 
 export default function Films(props) {
-  const { data, status, error } = useQuery("films", () =>
+  const { data, status, error } = useQuery(["films"], () =>
     fetch("https://swapi.dev/api/films/")
   );
 

examples/suspense/src/components/Projects.js

@@ -8,7 +8,7 @@ import { fetchProjects, fetchProject } from "../queries";
 
 export default function Projects({ setActiveProject }) {
   const queryClient = useQueryClient();
-  const { data, isFetching } = useQuery("projects", fetchProjects);
+  const { data, isFetching } = useQuery(['projects'], fetchProjects);
 
   return (
     <div>

examples/suspense/src/index.js

@@ -46,7 +46,7 @@ function Example() {
         onClick={() => {
           setShowProjects((old) => {
             if (!old) {
-              queryClient.prefetchQuery("projects", fetchProjects);
+              queryClient.prefetchQuery(["projects"], fetchProjects);
             }
             return !old;
           });