单个组件中的多个 usequeries

Question

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

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

Answer 1

确实可以使用多个查询

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

但是，它仍然只是一个语法糖

Answer 2

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

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

Answer 3

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

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

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

Answer 4

您可以将它们链接在 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>;
}

单个组件中的多个 usequeries

multiple usequeries in a single component

react-native

react-apollo

apollo-client