调用一个查询并等待其完成，然后再调用另一个查询

Question

查询

PRODUCT_BY_ID

需要等待查询

CATEGORIES

完成，之后我想调用查询

PRODUCT_BY_ID

，我在查询

CATEGORIES

中使用查询

PRODUCT_BY_ID

中的数据，这就是为什么我需要等待要首先完成查询

CATEGORIES

，我该怎么做？

如果有人可以帮助我，我将非常感激。

useQuery<IProductCategoryQueryResult>(CATEGORIES, {
          variables: {
             pagination: { pageSize: 20 },
          },
          onCompleted: (res) => {
             if (!res) return;
    
             const { categories } = res;
             if (!categories) return;
    
             const { data } = categories;
    
             const allCategories: ICategories[] = data?.map((category: ICategoriesFinal) => ({
                id: category?.id,
                name: category?.attributes?.name,
                value: category?.attributes?.value,
             }));
    
             setCategories(allCategories);
          },
       });
    
       
       useQuery<IProductDetailQueryResult>(PRODUCT_BY_ID, {
          variables: {
             id,
          },
          onCompleted: (res) => {
             if (!res) return;
    
             const { product } = res;
             if (!product) return;
             const { attributes } = product.data;
    
             const imagesData = attributes?.images?.data;
             const imageUrls = imagesData?.map(
                (image: IProductDetailImage) =>
                   `${ENV.VITE_APP_AUTH_ENDPOINT}${image.attributes.url}`,
             );
    
             const imageIds = imagesData?.map((image: IProductDetailImage) =>
                parseInt(image.id),
             );
    
             const productDetail: IProductDetail = {
                reference: attributes?.reference,
                images: imageUrls,
                imagesId: imageIds,
                description: attributes?.description,
                numericPrice: attributes?.price?.numericPrice,
                displayPrice: attributes?.price?.displayPrice,
                category: attributes?.category?.data?.attributes?.value,
             };
    
             const checkCategory: ICategoryCheck = categories?.find(
                (category) => category.value === productDetail.category,
             );
    
             setImageUrlArray(imageUrls);
             setImageIdArray(imageIds);
    
             reset({
                reference: productDetail.reference,
                category: checkCategory.id,
                numericPrice: productDetail.numericPrice,
                displayPrice: productDetail.displayPrice,
                description: productDetail.description,
             });
    
             
          },
       });

Answer 1

您通常不应该是任何组件本地状态设置者或此处的

onCompleted

回调，因为您可能会得到多次重新渲染，并且中间状态不一致。

相反，您的第一个

useQuery

可以使用派生状态与

useMemo

像

一样重写

const categoriesReturnValue = useQuery<IProductCategoryQueryResult>(CATEGORIES, {
  variables: {
     pagination: { pageSize: 20 },
  },
});
const categoies = useMemo(() => categoriesReturnValue.data?.map((category: ICategoriesFinal) => ({
  id: category?.id,
  name: category?.attributes?.name,
  value: category?.attributes?.value,
})), [categoriesReturnValue.data])

从此，进入真正的问题：如何对第一个查询进行第二个查询？

为此，您可以使用

skip

选项：

useQuery<IProductDetailQueryResult>(PRODUCT_BY_ID,
  {
    variables: {
      id,
    },
    // don't execute this query if we don't know `id` yet
    // you can use all kinds of logic here, this is just an example
    skip: id === undefined,
  });