@tanstack/react-query 5.0.0-alpha.85 → 5.0.0-alpha.87

package/build/codemods/__testfixtures__/default-import.output.tsx

@@ -1,96 +0,0 @@
-import * as React from 'react'
-import {
-  QueryCache,
-  QueryClient,
-  useInfiniteQuery,
-  useIsFetching,
-  useIsMutating,
-  useMutation,
-  useQueries,
-  useQuery,
-  useQueryClient,
-} from 'react-query'
-
-export const Examples = () => {
-  useQuery(['todos'])
-  useInfiniteQuery(['todos'])
-  useMutation(['todos'])
-  useIsFetching(['todos'])
-  useIsMutating(['todos'])
-  useQueries({
-    queries: [query1, query2]
-  })
-  // QueryClient methods
-  // --- Instantiated hook call.
-  const queryClient = useQueryClient()
-  queryClient.getMutationDefaults(['todos'])
-  queryClient.getQueriesData(['todos'])
-  queryClient.getQueryData(['todos'])
-  queryClient.getQueryDefaults(['todos'])
-  queryClient.getQueryState(['todos'])
-  queryClient.isFetching(['todos'])
-  queryClient.setMutationDefaults(['todos'], { mutationFn: async () => null })
-  queryClient.setQueriesData(['todos'], () => null)
-  queryClient.setQueryData(['todos'], () => null)
-  queryClient.setQueryDefaults(['todos'], { queryFn: async () => null })
-  queryClient.cancelQueries(['todos'])
-  queryClient.fetchInfiniteQuery(['todos'])
-  queryClient.fetchQuery(['todos'])
-  queryClient.invalidateQueries(['todos'])
-  queryClient.prefetchInfiniteQuery(['todos'])
-  queryClient.prefetchQuery(['todos'])
-  queryClient.refetchQueries(['todos'])
-  queryClient.removeQueries(['todos'])
-  queryClient.resetQueries(['todos'])
-  // --- Direct hook call.
-  useQueryClient().getMutationDefaults(['todos'])
-  useQueryClient().getQueriesData(['todos'])
-  useQueryClient().getQueryData(['todos'])
-  useQueryClient().getQueryDefaults(['todos'])
-  useQueryClient().getQueryState(['todos'])
-  useQueryClient().isFetching(['todos'])
-  useQueryClient().setMutationDefaults(['todos'], {
-    mutationFn: async () => null,
-  })
-  useQueryClient().setQueriesData(['todos'], () => null)
-  useQueryClient().setQueryData(['todos'], () => null)
-  useQueryClient().setQueryDefaults(['todos'], { queryFn: async () => null })
-  useQueryClient().cancelQueries(['todos'])
-  useQueryClient().fetchInfiniteQuery(['todos'])
-  useQueryClient().fetchQuery(['todos'])
-  useQueryClient().invalidateQueries(['todos'])
-  useQueryClient().prefetchInfiniteQuery(['todos'])
-  useQueryClient().prefetchQuery(['todos'])
-  useQueryClient().refetchQueries(['todos'])
-  useQueryClient().removeQueries(['todos'])
-  useQueryClient().resetQueries(['todos'])
-  // QueryCache
-  // --- NewExpression
-  const queryCache1 = new QueryCache({
-    onError: (error) => console.log(error),
-    onSuccess: (success) => console.log(success)
-  })
-  queryCache1.find(['todos'])
-  queryCache1.findAll(['todos'])
-  // --- Instantiated hook call.
-  const queryClient1 = useQueryClient()
-  queryClient1.getQueryCache().find(['todos'])
-  queryClient1.getQueryCache().findAll(['todos'])
-  //
-  const queryClient2 = new QueryClient({})
-  queryClient2.getQueryCache().find(['todos'])
-  queryClient2.getQueryCache().findAll(['todos'])
-  //
-  const queryCache2 = queryClient1.getQueryCache()
-  queryCache2.find(['todos'])
-  queryCache2.findAll(['todos'])
-  // --- Direct hook call.
-  useQueryClient().getQueryCache().find(['todos'])
-  useQueryClient().getQueryCache().findAll(['todos'])
-  //
-  const queryCache3 = useQueryClient().getQueryCache()
-  queryCache3.find(['todos'])
-  queryCache3.findAll(['todos'])
-
-  return <div>Example Component</div>
-}

package/build/codemods/__testfixtures__/named-import.input.tsx

@@ -1,96 +0,0 @@
-import * as React from 'react'
-import {
-  QueryCache as RenamedQueryCache,
-  QueryClient as RenamedQueryClient,
-  useInfiniteQuery as useRenamedInfiniteQuery,
-  useIsFetching as useRenamedIsFetching,
-  useIsMutating as useRenamedIsMutating,
-  useMutation as useRenamedMutation,
-  useQueries as useRenamedQueries,
-  useQuery as useRenamedQuery,
-  useQueryClient as useRenamedQueryClient,
-} from 'react-query'
-
-export const Examples = () => {
-  useRenamedQuery('todos')
-  useRenamedInfiniteQuery('todos')
-  useRenamedMutation('todos')
-  useRenamedIsFetching('todos')
-  useRenamedIsMutating('todos')
-  useRenamedQueries([query1, query2])
-  // QueryClient methods
-  // --- Instantiated hook call.
-  const queryClient = useRenamedQueryClient()
-  queryClient.getMutationDefaults('todos')
-  queryClient.getQueriesData('todos')
-  queryClient.getQueryData('todos')
-  queryClient.getQueryDefaults('todos')
-  queryClient.getQueryState('todos')
-  queryClient.isFetching('todos')
-  queryClient.setMutationDefaults('todos', { mutationFn: async () => null })
-  queryClient.setQueriesData('todos', () => null)
-  queryClient.setQueryData('todos', () => null)
-  queryClient.setQueryDefaults('todos', { queryFn: async () => null })
-  queryClient.cancelQueries('todos')
-  queryClient.fetchInfiniteQuery('todos')
-  queryClient.fetchQuery('todos')
-  queryClient.invalidateQueries('todos')
-  queryClient.prefetchInfiniteQuery('todos')
-  queryClient.prefetchQuery('todos')
-  queryClient.refetchQueries('todos')
-  queryClient.removeQueries('todos')
-  queryClient.resetQueries('todos')
-  // --- Direct hook call.
-  useRenamedQueryClient().getMutationDefaults('todos')
-  useRenamedQueryClient().getQueriesData('todos')
-  useRenamedQueryClient().getQueryData('todos')
-  useRenamedQueryClient().getQueryDefaults('todos')
-  useRenamedQueryClient().getQueryState('todos')
-  useRenamedQueryClient().isFetching('todos')
-  useRenamedQueryClient().setMutationDefaults('todos', {
-    mutationFn: async () => null,
-  })
-  useRenamedQueryClient().setQueriesData('todos', () => null)
-  useRenamedQueryClient().setQueryData('todos', () => null)
-  useRenamedQueryClient().setQueryDefaults('todos', {
-    queryFn: async () => null,
-  })
-  useRenamedQueryClient().cancelQueries('todos')
-  useRenamedQueryClient().fetchInfiniteQuery('todos')
-  useRenamedQueryClient().fetchQuery('todos')
-  useRenamedQueryClient().invalidateQueries('todos')
-  useRenamedQueryClient().prefetchInfiniteQuery('todos')
-  useRenamedQueryClient().prefetchQuery('todos')
-  useRenamedQueryClient().refetchQueries('todos')
-  useRenamedQueryClient().removeQueries('todos')
-  useRenamedQueryClient().resetQueries('todos')
-  // QueryCache
-  // --- NewExpression
-  const queryCache1 = new RenamedQueryCache({
-    onError: (error) => console.log(error),
-    onSuccess: (success) => console.log(success)
-  })
-  queryCache1.find('todos')
-  queryCache1.findAll('todos')
-  // --- Instantiated hook call.
-  const queryClient1 = useRenamedQueryClient()
-  queryClient1.getQueryCache().find('todos')
-  queryClient1.getQueryCache().findAll('todos')
-  //
-  const queryClient2 = new RenamedQueryClient({})
-  queryClient2.getQueryCache().find('todos')
-  queryClient2.getQueryCache().findAll('todos')
-  //
-  const queryCache2 = queryClient1.getQueryCache()
-  queryCache2.find('todos')
-  queryCache2.findAll('todos')
-  // --- Direct hook call.
-  useRenamedQueryClient().getQueryCache().find('todos')
-  useRenamedQueryClient().getQueryCache().findAll('todos')
-  //
-  const queryCache3 = useRenamedQueryClient().getQueryCache()
-  queryCache3.find('todos')
-  queryCache3.findAll('todos')
-
-  return <div>Example Component</div>
-}

package/build/codemods/__testfixtures__/named-import.output.tsx

@@ -1,98 +0,0 @@
-import * as React from 'react'
-import {
-  QueryCache as RenamedQueryCache,
-  QueryClient as RenamedQueryClient,
-  useInfiniteQuery as useRenamedInfiniteQuery,
-  useIsFetching as useRenamedIsFetching,
-  useIsMutating as useRenamedIsMutating,
-  useMutation as useRenamedMutation,
-  useQueries as useRenamedQueries,
-  useQuery as useRenamedQuery,
-  useQueryClient as useRenamedQueryClient,
-} from 'react-query'
-
-export const Examples = () => {
-  useRenamedQuery(['todos'])
-  useRenamedInfiniteQuery(['todos'])
-  useRenamedMutation(['todos'])
-  useRenamedIsFetching(['todos'])
-  useRenamedIsMutating(['todos'])
-  useRenamedQueries({
-    queries: [query1, query2]
-  })
-  // QueryClient methods
-  // --- Instantiated hook call.
-  const queryClient = useRenamedQueryClient()
-  queryClient.getMutationDefaults(['todos'])
-  queryClient.getQueriesData(['todos'])
-  queryClient.getQueryData(['todos'])
-  queryClient.getQueryDefaults(['todos'])
-  queryClient.getQueryState(['todos'])
-  queryClient.isFetching(['todos'])
-  queryClient.setMutationDefaults(['todos'], { mutationFn: async () => null })
-  queryClient.setQueriesData(['todos'], () => null)
-  queryClient.setQueryData(['todos'], () => null)
-  queryClient.setQueryDefaults(['todos'], { queryFn: async () => null })
-  queryClient.cancelQueries(['todos'])
-  queryClient.fetchInfiniteQuery(['todos'])
-  queryClient.fetchQuery(['todos'])
-  queryClient.invalidateQueries(['todos'])
-  queryClient.prefetchInfiniteQuery(['todos'])
-  queryClient.prefetchQuery(['todos'])
-  queryClient.refetchQueries(['todos'])
-  queryClient.removeQueries(['todos'])
-  queryClient.resetQueries(['todos'])
-  // --- Direct hook call.
-  useRenamedQueryClient().getMutationDefaults(['todos'])
-  useRenamedQueryClient().getQueriesData(['todos'])
-  useRenamedQueryClient().getQueryData(['todos'])
-  useRenamedQueryClient().getQueryDefaults(['todos'])
-  useRenamedQueryClient().getQueryState(['todos'])
-  useRenamedQueryClient().isFetching(['todos'])
-  useRenamedQueryClient().setMutationDefaults(['todos'], {
-    mutationFn: async () => null,
-  })
-  useRenamedQueryClient().setQueriesData(['todos'], () => null)
-  useRenamedQueryClient().setQueryData(['todos'], () => null)
-  useRenamedQueryClient().setQueryDefaults(['todos'], {
-    queryFn: async () => null,
-  })
-  useRenamedQueryClient().cancelQueries(['todos'])
-  useRenamedQueryClient().fetchInfiniteQuery(['todos'])
-  useRenamedQueryClient().fetchQuery(['todos'])
-  useRenamedQueryClient().invalidateQueries(['todos'])
-  useRenamedQueryClient().prefetchInfiniteQuery(['todos'])
-  useRenamedQueryClient().prefetchQuery(['todos'])
-  useRenamedQueryClient().refetchQueries(['todos'])
-  useRenamedQueryClient().removeQueries(['todos'])
-  useRenamedQueryClient().resetQueries(['todos'])
-  // QueryCache
-  // --- NewExpression
-  const queryCache1 = new RenamedQueryCache({
-    onError: (error) => console.log(error),
-    onSuccess: (success) => console.log(success)
-  })
-  queryCache1.find(['todos'])
-  queryCache1.findAll(['todos'])
-  // --- Instantiated hook call.
-  const queryClient1 = useRenamedQueryClient()
-  queryClient1.getQueryCache().find(['todos'])
-  queryClient1.getQueryCache().findAll(['todos'])
-  //
-  const queryClient2 = new RenamedQueryClient({})
-  queryClient2.getQueryCache().find(['todos'])
-  queryClient2.getQueryCache().findAll(['todos'])
-  //
-  const queryCache2 = queryClient1.getQueryCache()
-  queryCache2.find(['todos'])
-  queryCache2.findAll(['todos'])
-  // --- Direct hook call.
-  useRenamedQueryClient().getQueryCache().find(['todos'])
-  useRenamedQueryClient().getQueryCache().findAll(['todos'])
-  //
-  const queryCache3 = useRenamedQueryClient().getQueryCache()
-  queryCache3.find(['todos'])
-  queryCache3.findAll(['todos'])
-
-  return <div>Example Component</div>
-}

package/build/codemods/__testfixtures__/namespaced-import.input.tsx

@@ -1,86 +0,0 @@
-import * as React from 'react'
-import * as RQ from 'react-query'
-
-export const Examples = () => {
-  RQ.useQuery('todos')
-  RQ.useInfiniteQuery('todos')
-  RQ.useMutation('todos')
-  RQ.useIsFetching('todos')
-  RQ.useIsMutating('todos')
-  RQ.useQueries([query1, query2])
-  // QueryClient methods
-  // --- Instantiated hook call.
-  const queryClient = RQ.useQueryClient()
-  queryClient.getMutationDefaults('todos')
-  queryClient.getQueriesData('todos')
-  queryClient.getQueryData('todos')
-  queryClient.getQueryDefaults('todos')
-  queryClient.getQueryState('todos')
-  queryClient.isFetching('todos')
-  queryClient.setMutationDefaults('todos', { mutationFn: async () => null })
-  queryClient.setQueriesData('todos', () => null)
-  queryClient.setQueryData('todos', () => null)
-  queryClient.setQueryDefaults('todos', { queryFn: async () => null })
-  queryClient.cancelQueries('todos')
-  queryClient.fetchInfiniteQuery('todos')
-  queryClient.fetchQuery('todos')
-  queryClient.invalidateQueries('todos')
-  queryClient.prefetchInfiniteQuery('todos')
-  queryClient.prefetchQuery('todos')
-  queryClient.refetchQueries('todos')
-  queryClient.removeQueries('todos')
-  queryClient.resetQueries('todos')
-  // --- Direct hook call.
-  RQ.useQueryClient().getMutationDefaults('todos')
-  RQ.useQueryClient().getQueriesData('todos')
-  RQ.useQueryClient().getQueryData('todos')
-  RQ.useQueryClient().getQueryDefaults('todos')
-  RQ.useQueryClient().getQueryState('todos')
-  RQ.useQueryClient().isFetching('todos')
-  RQ.useQueryClient().setMutationDefaults('todos', {
-    mutationFn: async () => null,
-  })
-  RQ.useQueryClient().setQueriesData('todos', () => null)
-  RQ.useQueryClient().setQueryData('todos', () => null)
-  RQ.useQueryClient().setQueryDefaults('todos', {
-    queryFn: async () => null,
-  })
-  RQ.useQueryClient().cancelQueries('todos')
-  RQ.useQueryClient().fetchInfiniteQuery('todos')
-  RQ.useQueryClient().fetchQuery('todos')
-  RQ.useQueryClient().invalidateQueries('todos')
-  RQ.useQueryClient().prefetchInfiniteQuery('todos')
-  RQ.useQueryClient().prefetchQuery('todos')
-  RQ.useQueryClient().refetchQueries('todos')
-  RQ.useQueryClient().removeQueries('todos')
-  RQ.useQueryClient().resetQueries('todos')
-  // QueryCache
-  // --- NewExpression
-  const queryCache1 = new RQ.QueryCache({
-    onError: (error) => console.log(error),
-    onSuccess: (success) => console.log(success)
-  })
-  queryCache1.find('todos')
-  queryCache1.findAll('todos')
-  // --- Instantiated hook call.
-  const queryClient1 = RQ.useQueryClient()
-  queryClient1.getQueryCache().find('todos')
-  queryClient1.getQueryCache().findAll('todos')
-  //
-  const queryClient2 = new RQ.QueryClient({})
-  queryClient2.getQueryCache().find('todos')
-  queryClient2.getQueryCache().findAll('todos')
-  //
-  const queryCache2 = queryClient1.getQueryCache()
-  queryCache2.find('todos')
-  queryCache2.findAll('todos')
-  // --- Direct hook call.
-  RQ.useQueryClient().getQueryCache().find('todos')
-  RQ.useQueryClient().getQueryCache().findAll('todos')
-  //
-  const queryCache3 = RQ.useQueryClient().getQueryCache()
-  queryCache3.find('todos')
-  queryCache3.findAll('todos')
-
-  return <div>Example Component</div>
-}

package/build/codemods/__testfixtures__/namespaced-import.output.tsx

@@ -1,88 +0,0 @@
-import * as React from 'react'
-import * as RQ from 'react-query'
-
-export const Examples = () => {
-  RQ.useQuery(['todos'])
-  RQ.useInfiniteQuery(['todos'])
-  RQ.useMutation(['todos'])
-  RQ.useIsFetching(['todos'])
-  RQ.useIsMutating(['todos'])
-  RQ.useQueries({
-    queries: [query1, query2]
-  })
-  // QueryClient methods
-  // --- Instantiated hook call.
-  const queryClient = RQ.useQueryClient()
-  queryClient.getMutationDefaults(['todos'])
-  queryClient.getQueriesData(['todos'])
-  queryClient.getQueryData(['todos'])
-  queryClient.getQueryDefaults(['todos'])
-  queryClient.getQueryState(['todos'])
-  queryClient.isFetching(['todos'])
-  queryClient.setMutationDefaults(['todos'], { mutationFn: async () => null })
-  queryClient.setQueriesData(['todos'], () => null)
-  queryClient.setQueryData(['todos'], () => null)
-  queryClient.setQueryDefaults(['todos'], { queryFn: async () => null })
-  queryClient.cancelQueries(['todos'])
-  queryClient.fetchInfiniteQuery(['todos'])
-  queryClient.fetchQuery(['todos'])
-  queryClient.invalidateQueries(['todos'])
-  queryClient.prefetchInfiniteQuery(['todos'])
-  queryClient.prefetchQuery(['todos'])
-  queryClient.refetchQueries(['todos'])
-  queryClient.removeQueries(['todos'])
-  queryClient.resetQueries(['todos'])
-  // --- Direct hook call.
-  RQ.useQueryClient().getMutationDefaults(['todos'])
-  RQ.useQueryClient().getQueriesData(['todos'])
-  RQ.useQueryClient().getQueryData(['todos'])
-  RQ.useQueryClient().getQueryDefaults(['todos'])
-  RQ.useQueryClient().getQueryState(['todos'])
-  RQ.useQueryClient().isFetching(['todos'])
-  RQ.useQueryClient().setMutationDefaults(['todos'], {
-    mutationFn: async () => null,
-  })
-  RQ.useQueryClient().setQueriesData(['todos'], () => null)
-  RQ.useQueryClient().setQueryData(['todos'], () => null)
-  RQ.useQueryClient().setQueryDefaults(['todos'], {
-    queryFn: async () => null,
-  })
-  RQ.useQueryClient().cancelQueries(['todos'])
-  RQ.useQueryClient().fetchInfiniteQuery(['todos'])
-  RQ.useQueryClient().fetchQuery(['todos'])
-  RQ.useQueryClient().invalidateQueries(['todos'])
-  RQ.useQueryClient().prefetchInfiniteQuery(['todos'])
-  RQ.useQueryClient().prefetchQuery(['todos'])
-  RQ.useQueryClient().refetchQueries(['todos'])
-  RQ.useQueryClient().removeQueries(['todos'])
-  RQ.useQueryClient().resetQueries(['todos'])
-  // QueryCache
-  // --- NewExpression
-  const queryCache1 = new RQ.QueryCache({
-    onError: (error) => console.log(error),
-    onSuccess: (success) => console.log(success)
-  })
-  queryCache1.find(['todos'])
-  queryCache1.findAll(['todos'])
-  // --- Instantiated hook call.
-  const queryClient1 = RQ.useQueryClient()
-  queryClient1.getQueryCache().find(['todos'])
-  queryClient1.getQueryCache().findAll(['todos'])
-  //
-  const queryClient2 = new RQ.QueryClient({})
-  queryClient2.getQueryCache().find(['todos'])
-  queryClient2.getQueryCache().findAll(['todos'])
-  //
-  const queryCache2 = queryClient1.getQueryCache()
-  queryCache2.find(['todos'])
-  queryCache2.findAll(['todos'])
-  // --- Direct hook call.
-  RQ.useQueryClient().getQueryCache().find(['todos'])
-  RQ.useQueryClient().getQueryCache().findAll(['todos'])
-  //
-  const queryCache3 = RQ.useQueryClient().getQueryCache()
-  queryCache3.find(['todos'])
-  queryCache3.findAll(['todos'])
-
-  return <div>Example Component</div>
-}

package/build/codemods/__testfixtures__/parameter-is-identifier.input.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react'
-import { useMutation, useQuery, useQueryClient } from 'react-query'
-
-export const ExampleWithStringLiteralKey = () => {
-  const stringLiteralKey = 'todos'
-  useQuery(stringLiteralKey)
-  useMutation(stringLiteralKey)
-  // QueryClient methods
-  // --- Instantiated hook call.
-  const queryClient = useQueryClient()
-  queryClient.cancelQueries(stringLiteralKey)
-  // --- Direct hook call.
-  useQueryClient().cancelQueries(stringLiteralKey)
-
-  return <div>Example Component</div>
-}
-
-export const ExampleWithTemplateLiteral = () => {
-  const templateLiteralKey = `todos`
-  useQuery(templateLiteralKey)
-  useMutation(templateLiteralKey)
-}
-
-export const ExampleWithArrayExpressionKey = () => {
-  const arrayExpressionKey = ['todos']
-  useQuery(arrayExpressionKey)
-  useMutation(arrayExpressionKey)
-  // QueryClient methods
-  // --- Instantiated hook call.
-  const queryClient = useQueryClient()
-  queryClient.cancelQueries(queryKey2)
-  // --- Direct hook call.
-  useQueryClient().cancelQueries(queryKey2)
-
-  return <div>Example Component</div>
-}
-
-export const ExampleWithUnknownKey = () => {
-  useQuery(unknownQueryKey)
-  useMutation(unknownQueryKey)
-  // QueryClient methods
-  // --- Instantiated hook call.
-  const queryClient = useQueryClient()
-  queryClient.cancelQueries(unknownQueryKey)
-  // --- Direct hook call.
-  useQueryClient().cancelQueries(unknownQueryKey)
-
-  return <div>Example Component</div>
-}

package/build/codemods/__testfixtures__/parameter-is-identifier.output.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react'
-import { useMutation, useQuery, useQueryClient } from 'react-query'
-
-export const ExampleWithStringLiteralKey = () => {
-  const stringLiteralKey = 'todos'
-  useQuery([stringLiteralKey])
-  useMutation([stringLiteralKey])
-  // QueryClient methods
-  // --- Instantiated hook call.
-  const queryClient = useQueryClient()
-  queryClient.cancelQueries([stringLiteralKey])
-  // --- Direct hook call.
-  useQueryClient().cancelQueries([stringLiteralKey])
-
-  return <div>Example Component</div>
-}
-
-export const ExampleWithTemplateLiteral = () => {
-  const templateLiteralKey = `todos`
-  useQuery([templateLiteralKey])
-  useMutation([templateLiteralKey])
-}
-
-export const ExampleWithArrayExpressionKey = () => {
-  const arrayExpressionKey = ['todos']
-  useQuery(arrayExpressionKey)
-  useMutation(arrayExpressionKey)
-  // QueryClient methods
-  // --- Instantiated hook call.
-  const queryClient = useQueryClient()
-  queryClient.cancelQueries(queryKey2)
-  // --- Direct hook call.
-  useQueryClient().cancelQueries(queryKey2)
-
-  return <div>Example Component</div>
-}
-
-export const ExampleWithUnknownKey = () => {
-  useQuery(unknownQueryKey)
-  useMutation(unknownQueryKey)
-  // QueryClient methods
-  // --- Instantiated hook call.
-  const queryClient = useQueryClient()
-  queryClient.cancelQueries(unknownQueryKey)
-  // --- Direct hook call.
-  useQueryClient().cancelQueries(unknownQueryKey)
-
-  return <div>Example Component</div>
-}