如何使用提供者值来 useMutation 并在之后将更改分派到状态？

Question

我想使用 Context.Provider 值来处理变异和调度类似的更改。 我已经阅读了 React-Apollo 的 onComplete 方法，但我不确定哪种方法将涵盖更多我需要同时改变和调度状态的情况。 这是我所拥有的：

const CartContext = React.createContext<{
  state: State
  dispatch: Dispatch<AnyAction>
  cartApi: any
}>({ state: initialState, dispatch: () => null, cartApi: mutateUserProductsAndUpdateCart })

function CartProvider({ children }: { children?: React.ReactNode }) {
  const [state, dispatch] = useReducer<Reducer<State, AnyAction>>(reducer, initialState)

  // feel like i need to do something with the hook here to avoid invariant violation side effects
  const [updateUserProducts] = useUpdateUserProducts()
  return (
    <CartContext.Provider value={{ state, dispatch, cartApi: mutateUserProductsAndUpdateCart}}>
      {children}
    </CartContext.Provider>
  )
}
export const useCartState = () => useContext(CartContext)

而这里的，我想用我的mutateUserProductsAndUpdateCart做什么：

const mutateUserProductsAndUpdateCart = async (_mutation: any, _mutationParams: any, _dispatchObject: AnyObject) => {
  // apollo mutation
  const updateUserProductsResult = await updateUserProducts(_mutationParams)

  if (updateUserProductsResult.error) throw Error("wtf")

  // useReducer dispatch
  dispatch(_dispatchObject)

  return
}

这是我想在另一个组件上访问它的方式：

const { cartApi } = useCartState()
const addProductToCart = async () => {
  const result = await cartApi({
    mutation,
    mutationVariables,
    dispatchObject})
}

我觉得这篇文章是我应该采取的方向，但我对这里的实施感到非常迷茫。 谢谢阅读。

Answer 1

我不确定这是否能直接回答您的问题，但您是否考虑过仅使用 Apollo Client？ 看起来您正在尝试做两件事：

1. 将添加到购物车的商品保存到服务器
2. 在缓存中本地更新购物车

似乎您可以完全跳过创建自己的上下文，只需创建一个用于变异（保存购物车项目）的钩子，然后更新购物车项目的本地缓存。 像这样的东西：

import gql from 'graphql-tag';
import useMutation from '@apollo/client';

export const mutation = gql`
  mutation($items: [CartItem]!) {
    saveCartItems(items: $items) {
      id
      _list_of_properties_for_cache_update_
    }
  }
`;

export const useSaveCartItems = mutationProps => {
  const [saveCartItems, result] = useMutation(
    mutation,
    mutationProps
  );

  return [
    items => {
      saveCartItems({
        update: (cache, { data }) => {
          const query = getCartQuery; // Some query to get the cart items from the cache
          const results = cache.readQuery({ query });

          // We need to add new items only; existing items will auto-merge
          // Get list of new items from results
          const data = []; // List of new items; IMPLEMENT ME!!!

          cache.writeQuery({ query, data });
        },
        variables: { items },
      });
    },
    result,
  ];
};

然后在您的useCartState挂钩中，您可以使用用于update的相同查询查询项目的本地缓存并返回。 通过使用update功能，您可以修复本地缓存，任何人都可以从任何地方访问它，只需使用钩子即可。 我知道这不是你所要求的，但我希望它有所帮助。

可以在此处找到有关处理此问题的 Apollo 客户端文档。