How to use Apollo’s multiple useQuery() hooks in React

Question

I need to use 2 queries in my file and I am writing them like so:

const {loading, data } = useQuery(getCharactersQuery);
const {loading, data} = useQuery(getSingleCharacterQuery);

The problem is, they both have the same "loading" and "data" variables and I don’t see anywhere in the docs how can we have different ones. How can I differentiate them?

score 3 · Accepted Answer · 2020-08-31 16:23:35Z

It’s Object destructuring of JS Destructuring assignment. You can choose not to use it here to give different variable names.

const resCharacters = useQuery(getCharactersQuery);
const resSingleCharacter = useQuery(getSingleCharacterQuery);

if (resCharacters.loading || resSingleCharacter.loading) return 'Loading...';
...

Ref: Apollo document of useQuery

jperljperl 4,7122 gold badges16 silver badges29 bronze badges · Accepted Answer · 2020-08-31 16:18:13Z

3

This way, by giving them an alias.

const {loading, data } = useQuery(getCharactersQuery);
const {loading: singleCharacterLoading, data: singleCharacterData} = useQuery(getSingleCharacterQuery);

answered Aug 31, 2020 at 16:18

jperl

4,7122 gold badges16 silver badges29 bronze badges

Alan KuperAlan Kuper 262 bronze badges · Accepted Answer · 2021-09-15 12:33:59Z

-1

const GET_DATA = gql`
  query {
    characters {
      phone
      rating
      ratingType
      review
      city
      id
    }
    singleCharacter {
      title
      text
    }
  }
`;

const {loading, data } = useQuery(GET_DATA);

console.log(data) //{characters: [...], singleCharacter: [...]}

answered Sep 15, 2021 at 12:33

Alan Kuper

262 bronze badges

2

The author specifically asked how to solve this when they need to use more than one query. Also, please explain your code / the idea behind it and why it solves the problem.

– Taxel

Sep 15, 2021 at 15:44
Obviously, the request goes to one database, so we can combine several requests into one.

– Alan Kuper

Sep 16, 2021 at 11:11

How to use Apollo’s multiple useQuery() hooks in React