multiple usequeries in a single component

Question

I am unable to get the data by using the useQuery in the below mentioned way

const { data:data1 } = useQuery(Get_Doctor);
const {  loading, error,data } = useQuery(GET_Branch);

score 11 · Accepted Answer · answered Aug 20 '19 at 07:41

11

Indeed you can use multiple queries

const queryMultiple = () => {
  const res1 = useQuery(Get_Doctor);
  const res2 = useQuery(GET_Branch);
  return [res1, res2];
}

const [
    { loading: loading1, data: data1 },
    { loading: loading2, data: data2 }
] = queryMultiple()

What you want to do is compose multiple useQuery into your own custom hook:

Reference

But still, its just a syntactic sugar

answered Aug 20 '19 at 07:41

Medet Tleukabiluly

11,662
3
34
69

yeah,but when i want to access data in the below mentioned way it is showing undefined is not an object const Get_Doctor = gql` { getDoctorDetails(id:"033822a1-5c99-4421-93b1-bef91af89eea"){ id, qualification, doctorName, user{id} } } `; const GET_Branch = gql` { getBranch(id:"4a045f8c-dad6-4b05-8bd4-3aeb8f7df436") { branchName, address, email } } `; – Monika Aug 20 '19 at 10:22
well, you should try to make sure your requests work separately – Medet Tleukabiluly Aug 20 '19 at 12:05
This seems to be an elegant solution, in case the queries are dependant. [How to use multiple queries with dependent data?](https://github.com/apollographql/react-apollo/issues/3180#issuecomment-506291158) – srx Apr 15 '21 at 08:48

score 10 · Answer 2 · answered Sep 01 '20 at 20:15

const { data:doc_data } = useQuery(Get_Doctor);
const { data:branch_data, error: branch_error, loading: branch_loading } = useQuery(GET_Branch);

You just have to rename the data field to have it work. Note that you will have to rename the other fields like error, loading etc if any of your queries will be returning them.

score 8 · Answer 3 · answered Nov 19 '20 at 15:51

8

IMHO the simple approach is using basic variable object such this way:

const products = useQuery(LIST_PRODUCTS);
const categories = useQuery(LIST_CATEGORY);

//...
if (products.loading) {
  console.log("Loading list of products")
} else {
  processProducts(products.data)
}

//...
if (categories.loading) {
  console.log("Loading list of categories")
} else {
  processCategories(categories.data)
}

I think this is simple and more readable.

answered Nov 19 '20 at 15:51

azwar_akbar

1,451
18
27

ten times more readable lol. that hooks suggestion is a bit.... psychotic – Robert O'Toole May 31 '21 at 08:16
This answer is wrong in multiple magnitudes. Keep in mind both async calls. So even if you are right you need to take care of four possibilities. – windmaomao Feb 21 '23 at 21:39
@windmaomao I'm curious, can you elaborate why this answer is wrong? – Advena Feb 28 '23 at 10:00
@Tanckom i wrote an article here to explain why. https://medium.com/javascript-in-plain-english/excessive-react-rendering-caused-by-multiple-async-calls-2abc1ffd2aab – windmaomao Mar 01 '23 at 14:43
i'm not just saying this answer is wrong, I think the entire thread is misleading in a way that we believe this could work. Well, it has it's issues in the article I mentioned above. – windmaomao Mar 01 '23 at 14:44
I just read through your article, and you should really take a step back. Your single argument is about the fact that you render the double number of times, when you make the double amount of async calls, and that it can be reduced to a single render? I don't see any _"wrong in multiple magnitudes"_ here, but rather a "trick" to optimize the above code snippet. – Advena Mar 02 '23 at 07:41

score -1 · Answer 4 · answered Dec 01 '21 at 03:12

You can chain them in an if, else-if, and else statement and let the else handle the loading

example:

    import React from "react";
import styles from "./home.module.scss";
import { Link } from "react-router-dom";
import { useQuery, gql } from "@apollo/client";

/* query to get home page data */
export const HOME_PAGE_QUERY = gql`
  query getHomeData {
    home {
      title
      titleSpan
      message
      action
    }
  }
`;

interface PageData {
  title: string;
  titleSpan: string;
  message: string;
  action: string;
}
export default function Home() {
  const { error, data } = useQuery(HOME_PAGE_QUERY);
  // handle error
  if (error) return <p>Error :(</p>;
  // handle data
  else if (data) {
    const { home }: { home: PageData } = data;
    return (
      <article className={styles.home}>
        <h1 className={styles["home-title"]}>
          {home.title}
          <span>{home.titleSpan}</span>
        </h1>
        <p className={styles["home-message"]}>{home.message}</p>
        <Link className={styles["home-action"]} to="/destination">
          {home.action}
        </Link>
      </article>
    );
  }
  // handle loading
  else return <p>Loading...</p>;
}

multiple usequeries in a single component

4 Answers4

Linked