Why useQuery data is not exposed directly?

[beinoriusju]

When an URQL query loads data it's not directly accessible (eg. data), but through a query key (eg. data.todos) which does not make sense to me. Can someone explain why this is and if there are any good URQL react hooks in the wild that I'm might be missing out?

See example from docs:

import { gql, useQuery } from 'urql';

const TodosQuery = gql`
  query {
    todos {
      id
      title
    }
  }
`;

const Todos = () => {
  const [result, reexecuteQuery] = useQuery({
    query: TodosQuery,
  });

  const { data, fetching, error } = result;

  if (fetching) return <p>Loading...</p>;
  if (error) return <p>Oh no... {error.message}</p>;

  return (
    <ul>
      {data.todos.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

[JoviDeCroock]

Because you are selecting the data you need, nothing stops you from doing:

query {
  todos {}
  todo(id:1) {}
  authors {}
}

Then todos can't be directly accessible as you also need data.todo and data.authors