Add queryKey to hooks payload

[loiacon]

What about adding queryKey to hook payload?

const { data, status, queryKey } = useQuery('todos', fetchTodos)

console.log(queryKey) // 'todos'

With this, we can create custom hooks and always have the queryKey to make other operations:

// todos.js
const useTodos = () => {
  return useQuery('todos', fetchTodos)
}

// another-file.js
const MyComponent = () => {
  const { data, status, queryKey } = useTodos()

  const handleOnClick = () => {
    queryCache.removeQueries(queryKey)
  }

  return (
    <div>
      <button onClick={handleOnClick}>Remove Todos</button>
      <ul>
        {todos.map(todo => <li key={todo.id}>{todo.label}</li>)}
      </ul>
    </div>
  )
}

[tannerlinsley]

useQuery().query.queryKey

[tannerlinsley]

Or maybe even useQuery().queryKey. I know it's there somewhere ;)

[loiacon]

At v1.5.10, there's no type to useQuery().query. Do you think it's worth typing this? If so, I'll try to make a PR later