Why does refetching a query seem to trigger two fetches ?

[strblr]

Hello,

Given the following client :

const client = createClient({
  url: "http://localhost:8080",
  requestPolicy: "network-only",
  exchanges: [
    dedupExchange,
    cacheExchange(),
    fetchExchange
  ]
});

And the following experiment :

const query = gql`
  query($id: ID!) {
    todos(id: $id) {
      id
      content
      author
    }
  }
`;

export default function App() {
  const [{ data, fetching, error }, refetch] = useQuery({
    query,
    variables: { id: "1" }
  });

  console.log({ data, fetching, error });

  return error ? (
    <h1>Error !</h1>
  ) : !data ? (
    <h1>Fetching...</h1>
  ) : (
    <>
      <h1>Todo List</h1>
      <button onClick={() => refetch()}>Refetch</button>
      <ul>
        {data.todos.map((todo: any) => (
          <li key={todo.id}>
            {todo.content} (author: {todo.author})
          </li>
        ))}
      </ul>
    </>
  );
}

Here is what is logged when I click on the refetch button one time :

{data: {…}, fetching: true, error: undefined}
{data: {…}, fetching: false, error: undefined}
{data: {…}, fetching: true, error: undefined}
{data: {…}, fetching: false, error: undefined}

Why does it seem that the query is refetched two times ?

[kitten]

It's not actually the first is aborted rather quickly and this is due to the render cycle and effect cycle being separate in React.

I could go into some details here but the tl;dr is not to use network-only as a default or as input at all to hooks. I have a small explanation written up on the topic here: #1395 (comment)