使用skip/enable计算参数

Question

我很烦，我的一些阿波罗请求正在工作，而另一些则没有。那些似乎不起作用的是带有计算参数的请求。下面是做的一个例子工作:

import { computed } from "@vue/composition-api";
import * as getCategoryBySlug from "@graphql/api/query.category.gql";
import { useGraphQuery } from "./graph-query";
export function useGetCategory(context) {
const params = computed(() => {
const slug = context.root.$route.params.categorySlug;
if (!slug) return;
return { slug };
});
const { response, error, loading } = useGraphQuery(
params,
getCategoryBySlug,
(data) => data.categoryBySlug
);
return { category: response, categoryError: error, categoryLoading: loading };
}

计算我在categoryslog中的参数，它在路由上是可用的，所以它不应该是null/undefined。

我的<<p> strong> useGraphQuery 方法如下:

import { useQuery, useResult } from "@vue/apollo-composable";
export function useGraphQuery(params, gql, pathFn, clientId = "apiClient") {
// if (!params?.value)
//   return {
//     response: ref(undefined),
//     loading: ref(false),
//     error: ref(undefined),
//     query: ref(undefined),
//   };
// TODO: figure our a way to skip the call if the parameters are null
const { result, loading, error, query, fetchMore } = useQuery(gql, params, {
clientId,
//enabled: !!params?.value,
});
const response = useResult(result, null, pathFn);
return { response, loading, error, query, fetchMore };
}

正如你所看到的，我有一个问题，因为我不能跳过和启用似乎不能作为一个合适的解决方案(跳过)。如果参数为空/未定义，我尝试返回一个引用，但如果计算的参数可用，则从未尝试执行查询。因此，我的问题是如何跳过请求或等待，直到参数可用?

Answer 1

您应该考虑更改调用此方法的流，以便仅在参数定义时调用它，而不是在未准备好时跳过它并尝试从方法中重新触发它。大多数情况下，这将使代码更清晰，也使它更节约资源，因为它不会进行不必要的方法调用。

如果您依赖于用户输入，请尝试在调用此方法之前验证输入是否准备好。

你还可以在参数上添加一个监视器，当参数发生变化时触发流，并在监视器中检查所有相关的值在调用方法之前是否已经定义。

当然，如果你可以使用计算变量，在大多数情况下，它比使用观察者更好，但在某些情况下，它可以帮助(主要是当变量是由异步函数计算时，例如，使用阿波罗请求)。