apollo-cache-mutations

gistfile1.txt

//----Query-----//
query AuthUserShops($offset: Int!, $limit: Int!) {
  authUserShops(offset: $offset, limit: $limit) {
    id
    __typename
    name
    avatar
    description
    categoryId
    numProducts
    isShopFollowed
    isBlocked
  }
}

//----Result-----//
{
  "data": {
    "authUserShops": [
      {
        "id": 21,
        "__typename": "Shop",
        "name": "moona shop",
        "avatar": "https://aiminaabee/21-moona.shop/avatar/20211121-6mwm5-shopphoto.image.jpg",
        "description": "moona",
        "categoryId": 1,
        "numProducts": 6,
        "isShopFollowed": false,
        "isBlocked": false
      }
    ]
  }
}

//----Cache-----//
{
  'shop:1': {
    __typename: 'Shop',
    name: 'moona shop',
    ...
  },
  ...
  ROOT_QUERY: {
    authUserShops: {
      __typename: 'AuthUserShopsResponse',
      data: [
        { __ref: 'shop:1' },
        ...,
      ]
    }
  }
}

//----Updating the cache after creating shop mutation-----//
export function useCreateShop() {
  const [mutate, { data, error, loading }] = useCreateShopMutation({
    update: (cache, { data: { createShop } }: any) => {
      const existing: any = cache.readQuery({ query: AuthUserShopsDocument });
      cache.writeQuery({
        query: AuthUserShopsDocument,
        data: {
          ...existing,
          authUserShops: [...existing.authUserShops, createShop],
        },
      });
    },
  });
  return { mutate, data, error, loading };
}