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>
}