query-functions.md

id	query-functions
title	Query Functions
ref	docs/framework/react/guides/query-functions.md

useQuery(() => ({ queryKey: ['todos'], queryFn: fetchAllTodos }))
useQuery(() => ({
  queryKey: ['todos', todoId],
  queryFn: () => fetchTodoById(todoId),
}))
useQuery(() => ({
  queryKey: ['todos', todoId],
  queryFn: async () => {
    const data = await fetchTodoById(todoId)
    return data
  },
}))
useQuery(() => ({
  queryKey: ['todos', todoId],
  queryFn: ({ queryKey }) => fetchTodoById(queryKey[1]),
}))

const todosQuery = useQuery(() => ({
  queryKey: ['todos', todoId],
  queryFn: async () => {
    if (somethingGoesWrong) {
      throw new Error('Oh no!')
    }
    if (somethingElseGoesWrong) {
      return Promise.reject(new Error('Oh no!'))
    }

    return data
  },
}))

useQuery(() => ({
  queryKey: ['todos', todoId],
  queryFn: async () => {
    const response = await fetch('/todos/' + todoId)
    if (!response.ok) {
      throw new Error('Network response was not ok')
    }
    return response.json()
  },
}))

function Todos(props) {
  const todosQuery = useQuery(() => ({
    queryKey: ['todos', { status: props.status, page: props.page }],
    queryFn: fetchTodoList,
  }))
}

// Access the key, status and page variables in your query function!
function fetchTodoList({ queryKey }) {
  const [_key, { status, page }] = queryKey
  return new Promise()
}