reactjs - React Apollo 在变异后延迟更新缓存

Question

在运行 Mutation 后，我非常努力地更新 Apollo 缓存，但我无法在突变后消除 1 秒的延迟。

我按照'ac3-state-management-examples'来解决这个问题，但仍然找不到任何问题。这是我的客户端代码。

export const DELETE_ITEM_IN_CART = gql`
  mutation DeleteItemInCart($cartItemId: String!) {
    DeleteItemInCart(cartItemId: $cartItemId)
  }
`;

export function useDeleteItemInCart() {
  console.log(`DELETION START! ${Date()}`);

  const [mutate, { data, error }] = useMutation<
    DeleteItemInCartType.DeleteItemInCart,
    DeleteItemInCartType.DeleteItemInCartVariables
  >(DELETE_ITEM_IN_CART, {
    update(cache, { data }) {
      const deletedCartItemId = data?.DeleteItemInCart;
      const existingCartItems = cache.readQuery<myCart>({
        query: MY_CART,
      });

      if (existingCartItems && deletedCartItem && existingCartItems.myCart) {
        cache.writeQuery({
          query: MY_CART,
          data: {
            myCart: {
              cartItem: existingCartItems.myCart.cartItem.filter(
                t => t.id !== deletedCartItemId,
              ),
            },
          },
        });

        console.log(`DELETION OVER! ${Date()}`);
      }
    },
  });
  return { mutate, data, error };
}

这是我的服务器端突变

export const DeleteItemInCart = mutationField('DeleteItemInCart', {
  args: {cartItemId: nonNull('String')},
  type: nonNull('String'),
  description: 'Delete an item in my cart',
  resolve: (_, {cartItemId}, ctx) => {
    const {prisma} = ctx;

    try {
      prisma.cartItem.delete({
        where: {
          id: cartItemId,
        },
      });
      return cartItemId;
    } catch (error) {
      return cartItemId;
    }
  },
});

这是 Apollo-remote-state-management 的一个示例

export const DELETE_TODO = gql`
  mutation DeleteTodo ($id: Int!) {
    deleteTodo (id: $id) {
      success
      todo {
        id
        text 
        completed
      }
      error {
        ... on TodoNotFoundError {
          message
        }
      }
    }
  }
`

export function useDeleteTodo () {
  const [mutate, { data, error }] = useMutation<
    DeleteTodoTypes.DeleteTodo, 
    DeleteTodoTypes.DeleteTodoVariables
  >(
    DELETE_TODO,
    {
      update (cache, { data }) {
        const deletedTodoId = data?.deleteTodo.todo?.id;
        const allTodos = cache.readQuery<GetAllTodos>({
          query: GET_ALL_TODOS
        });

        cache.writeQuery({
          query: GET_ALL_TODOS,
          data: {
            todos: {
              edges: allTodos?.todos.edges.filter((t) => t?.node.id !== deletedTodoId)
            },
          },
        });
      }
    }
  )

  return { mutate, data, error };
}

有什么建议吗？使用 1 秒延迟是不可避免的apollo cache？

• 我为我的问题拍了一个简短的视频。我不认为这是不可避免的...

标签： reactjsgraphqlapollo-clientreact-apolloapollo-server