我如何使用提供者值来使用Mutation，然后再将更改分派给状态？

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)

这是我想[[like使用我的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})
}

我觉得this文章是我应该采取的方向，但是我对这里的实现非常迷失。感谢您的阅读。

Answer 1

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

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

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

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功能，您可以修复本地缓存，任何人都可以从任何地方访问它，只需使用钩子即可。我知道这并不是您所要的，但希望对您有所帮助。
可以找到here找到有关处理此问题的Apollo客户端文档。