如何让PRODUCT_BY_ID查询等待CATEGORIES查询完成后执行？

你需要确保PRODUCT_BY_ID查询在CATEGORIES查询完成后再执行，因为前者依赖后者返回的数据处理后续逻辑（比如代码中用categories匹配商品分类ID）。以下是两种可行的实现方式：

方案1：利用React Query的查询状态控制执行时机 #

直接使用useQuery返回的isSuccess状态来控制PRODUCT_BY_ID的触发时机，无需依赖本地state，更贴合React Query的设计逻辑：

// 先执行CATEGORIES查询，获取查询状态
const { isSuccess: categoriesSuccess } = useQuery<IProductCategoryQueryResult>(CATEGORIES, {
  variables: {
    pagination: { pageSize: 20 },
  },
  onCompleted: (res) => {
    if (!res?.categories?.data) return;

    const allCategories: ICategories[] = res.categories.data.map((category: ICategoriesFinal) => ({
      id: category.id,
      name: category.attributes?.name,
      value: category.attributes?.value,
    }));

    setCategories(allCategories);
  },
});

// 仅当CATEGORIES查询成功后，才执行PRODUCT_BY_ID
useQuery<IProductDetailQueryResult>(PRODUCT_BY_ID, {
  variables: {
    id,
  },
  // 关键配置：enabled设为categoriesSuccess，确保CATEGORIES完成后才触发查询
  enabled: categoriesSuccess,
  onCompleted: (res) => {
    if (!res?.product?.data) return;

    const { attributes } = res.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,
    });
  },
});

方案2：通过本地state控制执行时机 #

如果业务逻辑更依赖本地维护的categories状态，也可以通过判断该状态是否存在来启用PRODUCT_BY_ID：

const [categories, setCategories] = useState<ICategories[] | undefined>();

// CATEGORIES查询逻辑保持不变
useQuery<IProductCategoryQueryResult>(CATEGORIES, {
  variables: {
    pagination: { pageSize: 20 },
  },
  onCompleted: (res) => {
    if (!res) return;
    const { categories: categoriesRes } = res;
    if (!categoriesRes?.data) return;

    const allCategories: ICategories[] = categoriesRes.data.map((category: ICategoriesFinal) => ({
      id: category.id,
      name: category.attributes?.name,
      value: category.attributes?.value,
    }));

    setCategories(allCategories);
  },
});

// 当categories状态存在时，才执行PRODUCT_BY_ID
useQuery<IProductDetailQueryResult>(PRODUCT_BY_ID, {
  variables: {
    id,
  },
  // 只有categories有值时才启用查询
  enabled: !!categories,
  onCompleted: (res) => {
    // 原有逻辑保持不变
  },
});

关键说明 #

• enabled是React Query的核心配置项，当值为false时，查询不会自动执行，直到值变为true。
• 优先推荐方案1，因为isSuccess是查询自身的状态，比本地state更可靠，能避免state更新延迟导致的逻辑异常。

内容的提问来源于stack exchange，提问作者Miguel Ângelo Freitas