From 787f7d98a98a981e08f3fbf17c1ca538a50f4a99 Mon Sep 17 00:00:00 2001
From: balazsmatepetro <petrobalazsmate@gmail.com>
Date: Thu, 17 Feb 2022 11:20:48 +0100
Subject: [PATCH] chore(examples): apply codemod on the `examples` directory

---
 examples/auto-refetching/pages/index.js              |  6 +++---
 examples/basic-graphql-request/src/index.js          |  2 +-
 examples/custom-hooks/src/hooks/usePosts.js          |  2 +-
 examples/default-query-function/src/index.js         |  4 ++--
 examples/focus-refetching/pages/index.js             |  6 +++---
 examples/load-more-infinite-scroll/pages/index.js    |  2 +-
 .../optimistic-updates-typescript/pages/index.tsx    | 12 ++++++------
 examples/optimistic-updates/pages/index.js           | 12 ++++++------
 examples/playground/src/index.js                     |  4 ++--
 examples/prefetching/pages/index.js                  |  2 +-
 examples/rick-morty/src/Character.js                 |  6 +++---
 examples/rick-morty/src/Characters.js                |  2 +-
 examples/rick-morty/src/Episode.js                   |  4 ++--
 examples/rick-morty/src/Episodes.js                  |  2 +-
 examples/simple/src/index.js                         |  2 +-
 examples/star-wars/src/Character.js                  |  6 +++---
 examples/star-wars/src/Characters.js                 |  2 +-
 examples/star-wars/src/Film.js                       |  4 ++--
 examples/star-wars/src/Films.js                      |  2 +-
 examples/suspense/src/components/Projects.js         |  2 +-
 examples/suspense/src/index.js                       |  2 +-
 21 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/examples/auto-refetching/pages/index.js b/examples/auto-refetching/pages/index.js
index d8a87e237f..22285b2cb3 100755
--- a/examples/auto-refetching/pages/index.js
+++ b/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>
diff --git a/examples/basic-graphql-request/src/index.js b/examples/basic-graphql-request/src/index.js
index bdf8581d64..e8724bfd47 100644
--- a/examples/basic-graphql-request/src/index.js
+++ b/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(
diff --git a/examples/custom-hooks/src/hooks/usePosts.js b/examples/custom-hooks/src/hooks/usePosts.js
index cf49ca98ab..4fb688149b 100755
--- a/examples/custom-hooks/src/hooks/usePosts.js
+++ b/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);
 }
diff --git a/examples/default-query-function/src/index.js b/examples/default-query-function/src/index.js
index 3a5a5c406a..51836d9698 100644
--- a/examples/default-query-function/src/index.js
+++ b/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,
   });
 
diff --git a/examples/focus-refetching/pages/index.js b/examples/focus-refetching/pages/index.js
index 7e17c034d0..816a0259ab 100755
--- a/examples/focus-refetching/pages/index.js
+++ b/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 (
diff --git a/examples/load-more-infinite-scroll/pages/index.js b/examples/load-more-infinite-scroll/pages/index.js
index 44113c9320..d91d365547 100755
--- a/examples/load-more-infinite-scroll/pages/index.js
+++ b/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
diff --git a/examples/optimistic-updates-typescript/pages/index.tsx b/examples/optimistic-updates-typescript/pages/index.tsx
index f4988b34eb..5113d51520 100755
--- a/examples/optimistic-updates-typescript/pages/index.tsx
+++ b/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'])
       },
     }
   )
diff --git a/examples/optimistic-updates/pages/index.js b/examples/optimistic-updates/pages/index.js
index c720be41d9..06dad6e0d8 100755
--- a/examples/optimistic-updates/pages/index.js
+++ b/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'])
       },
     }
   )
diff --git a/examples/playground/src/index.js b/examples/playground/src/index.js
index 9606b53714..8ae322a4f2 100644
--- a/examples/playground/src/index.js
+++ b/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']);
     },
   });
 
diff --git a/examples/prefetching/pages/index.js b/examples/prefetching/pages/index.js
index cd4d3a4af6..6bfe7f0e64 100755
--- a/examples/prefetching/pages/index.js
+++ b/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)
diff --git a/examples/rick-morty/src/Character.js b/examples/rick-morty/src/Character.js
index a75bcd6e06..5c7a66a0d3 100644
--- a/examples/rick-morty/src/Character.js
+++ b/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}`)
   );
 
diff --git a/examples/rick-morty/src/Characters.js b/examples/rick-morty/src/Characters.js
index 39706a93af..0fca9f84fc 100644
--- a/examples/rick-morty/src/Characters.js
+++ b/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/")
   );
 
diff --git a/examples/rick-morty/src/Episode.js b/examples/rick-morty/src/Episode.js
index 47872f0189..6fad12ccb2 100644
--- a/examples/rick-morty/src/Episode.js
+++ b/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}`)
   );
 
diff --git a/examples/rick-morty/src/Episodes.js b/examples/rick-morty/src/Episodes.js
index 88cf6b0552..cc228a0eee 100644
--- a/examples/rick-morty/src/Episodes.js
+++ b/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")
   );
 
diff --git a/examples/simple/src/index.js b/examples/simple/src/index.js
index a20a52a4ac..1d63f87aeb 100644
--- a/examples/simple/src/index.js
+++ b/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())
diff --git a/examples/star-wars/src/Character.js b/examples/star-wars/src/Character.js
index 6de9faf173..ab04544926 100644
--- a/examples/star-wars/src/Character.js
+++ b/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}/`)
   );
 
diff --git a/examples/star-wars/src/Characters.js b/examples/star-wars/src/Characters.js
index a93eaaef23..a350dad2a9 100644
--- a/examples/star-wars/src/Characters.js
+++ b/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/`)
   );
 
diff --git a/examples/star-wars/src/Film.js b/examples/star-wars/src/Film.js
index 82155934ec..7d730550f9 100644
--- a/examples/star-wars/src/Film.js
+++ b/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}/`)
   );
 
diff --git a/examples/star-wars/src/Films.js b/examples/star-wars/src/Films.js
index 1f254b83f1..5fc0e5f2d0 100644
--- a/examples/star-wars/src/Films.js
+++ b/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/")
   );
 
diff --git a/examples/suspense/src/components/Projects.js b/examples/suspense/src/components/Projects.js
index 2d449c71a3..f95f316a54 100644
--- a/examples/suspense/src/components/Projects.js
+++ b/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>
diff --git a/examples/suspense/src/index.js b/examples/suspense/src/index.js
index c25576061d..da1f194823 100755
--- a/examples/suspense/src/index.js
+++ b/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;
           });