单个组件中的多个用户查询答案

【问题标题】：multiple usequeries in a single component单个组件中的多个用户查询
【发布时间】：2019-12-25 08:49:48
【问题描述】：

我无法通过下面提到的方式使用 useQuery 获取数据

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

【问题讨论】：

标签： react-native react-apollo apollo-client

【解决方案1】：

您可以将它们链接在 if、else-if 和 else 语句中，并让 else 处理加载

示例：

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

【讨论】：

【解决方案2】：

恕我直言，简单的方法是这样使用基本变量对象：

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

我认为这更简单，更具可读性。

【讨论】：

可读性提高十倍，哈哈。那个钩子的建议有点....精神病

【解决方案3】：

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

您只需重命名数据字段即可使其正常工作。请注意，如果您的任何查询将返回它们，则必须重命名 other 字段，例如 error, loading 等。

【讨论】：

【解决方案4】：

确实可以使用多个查询

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

您要做的是将多个 useQuery 组合到您自己的自定义挂钩中：

Reference

不过，它只是一个语法糖

【讨论】：

是的，但是当我想以下面提到的方式访问数据时，它显示 undefined is not an object const Get_Doctor = gql` { getDoctorDetails(id:"033822a1-5c99-4421-93b1-bef91af89eea "){ id, 资格, doctorName, user{id} } } ; const GET_Branch = gql { getBranch(id:"4a045f8c-dad6-4b05-8bd4-3aeb8f7df436") { branchName, address, email } } `;
好吧，您应该尝试确保您的请求单独工作
这似乎是一个优雅的解决方案，以防查询依赖。 How to use multiple queries with dependent data?