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?

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

4

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

edited Aug 31, 2020 at 16:23

answered Aug 31, 2020 at 16:18

keikai

15.3k10 gold badges56 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jperl · 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

5,2012 gold badges19 silver badges31 bronze badges

Comments

Alan Kuper · 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

261 silver badge2 bronze badges

2 Comments

Taxel Over a year ago

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.

Alan Kuper Over a year ago

Obviously, the request goes to one database, so we can combine several requests into one.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related