Как использовать 2 useQuery в одном файле?

Question

[DeniSidorenko]

Добрый день, использую Graphql + Apollo client на react'e. К примеру когда у меня один запрос в файле я могу оформить таким образом

const { loading , data = {} } = useQuery(KINDS)
	const { Kinds = [] } = data
// и дальше к примеру 
if(!loading){
  // code
}

Но как быть когда у меня 2 запроса в одном файле, и переменные loading, data уже нельзя использовать. И тогда приходиться писать длинные конструкции.
Пример

const kindsByRestaraunt = useQuery(KINDS_BY_RESTAURANT, {
		variables: { id }
	})

	if(!kindsByRestaraunt.loading)
		console.log(kindsByRestaraunt?.data?.KindsByRestaurant)

Как можно использовать повторно первый синтакс?

Comments

[Михаил]

loading1, loading2

[Николай Ланец]

А вы не пробовали оба ваши запроса в один объединить? Тогда на сервер пойдет отдин запрос и в ответе будут все ответы (сорри за каламбур).

Пример.

query appData {
  # Города
  cities(orderBy: { pagetitle: asc }) {
    ...city
  }

  # Рейтинги
  # Общие рейтинги по компаниям
  companies_rating: votesByRating {
    type
    target_id
    avg {
      voteValueAvg
    }
  }
}

И вот здесь я разбираю отдельные части запроса:

const appData = await apolloClient.query<AppDataQuery, AppDataQueryVariables>(
    {
      query: AppDataDocument,
      variables: {},
    }

  // ....

  cities: appData.data.cities,
  )

Можно сколько угодно запросов в один засунуть.

[DeniSidorenko]

Николай Ланец, Спасибо большое за такой ценный совет, не знал про такюу возможность)

[Николай Ланец]

DeniSidorenko, Не за что!
Этож GraphQL:) Он для того и был придуман. Только тогда изучите еще operationName. Тоже может понадобиться. Это позволяет в запросе на сервер указать сразу несколько граф-запросов, при этом указать какой именно выполнить (бывает просто готовится шаблон сразу с несколькими запросами на многие случаи. В общем, в практике встречается). Вот здесь пример: https://www.apollographql.com/docs/apollo-server/v...

Answer 1

[Александр]

Вы можете переименовывать переменные при деструкторизации.

const person = {
  name: 'John',
  age: 23
};

const { name } = person;
const { name: personName } = person;
console.log(name); // John
console.log(personName); // John

Answer 2

[Николай Ланец]

Вероятный ответ.