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);

Reword

Answer 1

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

Staple

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 } } `; – Reword

well, you should try to make sure your requests work separately – Staple

This seems to be an elegant solution, in case the queries are dependant. How to use multiple queries with dependent data? – Alphard

Answer 2

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.

Trap

Answer 3

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.

Ramble

ten times more readable lol. that hooks suggestion is a bit.... psychotic – Triolein

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. – Jacky

@Jacky I'm curious, can you elaborate why this answer is wrong? – Parasynthesis

@Tanckom i wrote an article here to explain why. medium.com/javascript-in-plain-english/… – Jacky

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. – Jacky

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. – Parasynthesis

Answer 4

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>;
}

Invent