Почему функциональный компонент визуализируется дважды?

Question

У меня есть компонент, который извлекает данные из маршрута GraphQL с помощью Apollo.

Когда я загружаю страницу, консоль дважды регистрирует данные.

Это компонент:

const LAUNCHES_QUERY = gql`
  query LaunchesQuery {
    launches {
      flight_number
      mission_name
      launch_date_local
      launch_success
    }
  }
`

const Launches = () => {

    const { loading, error, data } = useQuery(LAUNCHES_QUERY)

    const getLaunches = () => {

        if (loading) return <div>Loading..</div>
        if (error) console.log(error)
        console.log(data)
    }

  return (
    <div>
      <h1 className='display-4 my-3'>Launches</h1>
      {getLaunches()}
    </div>
  )
}

Что я делаю не так?

Answer 1

useQuery - это асинхронная c операция, первый рендеринг будет во время выборки данных, а следующий рендеринг будет во время выборки данных. Следовательно, он регистрирует дважды.

Answer 2

Один с начала useQuery, а другой с одного раза useQuery завершена выборка.

Вы можете просмотреть console.log loading.