单个组件中的多个使用查询

Question

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

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

Answer 1

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

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

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

我认为这很简单并且更具可读性。

Answer 3

事实上，您可以使用多个查询

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 组合到您自己的自定义钩子中：

参考

但是，它只是一个语法糖