使用 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 )

一切都按预期工作，删除/添加项目会正确刷新项目列表，但在执行任何突变后，loading 查询的状态永远不会为真（结果是我看不到Loading... UI 中的消息）。

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 方法。