使用 Apollo React 钩子重新获取查询

Question

我正在试用新的 Apollo React Hooks，并设置了一个小型商业示例。

function App() {
    const [cartId, setCartId] = useState('V1bvif5UxQThb84iukrxHx9dYQg9nr8j');

    const [removeItem, {loading: mutationLoading}] = useMutation(REMOVE_ITEM, {
        refetchQueries: [{query: CART_DETAILS, variables: {cartId}}]
    });
    const [addToCart] = useMutation(ADD_TO_CART, {
        refetchQueries: [{query: CART_DETAILS, variables: {cartId}}]
    });

    const {data, loading, error} = useQuery(CART_DETAILS, {
        variables: {cartId}
    });

    if (data && data.items) {
        console.log(`We have data`, data);
    }

    const handleRemove = itemId => {
        console.log(`Removing item with id ${itemId}`);
        removeItem({
            variables: {cartId, itemId}
        });
    };
    if (error) {
        console.log(`Some error happened`, error);
        return <h2>ERROR!</h2>;
    }
    if (loading) {
        return <p>Loading...</p>;
    }

    return ( ... some HTML skipped for brevity )

一切都按预期工作，removing/adding 一个项目正确地刷新了项目列表，但是在执行任何突变之后，查询的 loading 状态永远不会为真（结果是我不在 UI).

中看不到 Loading... 消息

loading 和 error 变量不是应该在重新获取查询时更新吗？

Answer 1

refetchQueries 不会导致监视查询的 loading 属性发生变化——它只是异步解析列出的查询并用结果更新缓存。

useMutation 还公开了一个 loading 属性。我相信您可以通过将 awaitRefetchQueries 设置为 true 来实现您正在寻找的效果。

const [removeItem, {loading: removeLoading}] = useMutation(REMOVE_ITEM, {
  refetchQueries: [{query: CART_DETAILS, variables: {cartId}}],
  awaitRefetchQueries: true,
});
const [addToCart, {loading: addLoading}] = useMutation(ADD_TO_CART, {
  refetchQueries: [{query: CART_DETAILS, variables: {cartId}}],
  awaitRefetchQueries: true,
});
const loading = queryLoading || addLoading || removeLoading

另一种方法是直接调用查询的 refetch 方法。

使用 Apollo React 钩子重新获取查询

Refetching queris with Apollo React hooks

apollo

react-hooks