How to avoid refetch after mutation? about react-fullstack-graphql

[stubailo]

I'm looking into updateQueries but have had no luck with it

That's generally the most manual approach available if the normalization isn't doing it automatically and you don't want to refetch. What's your use case and what have you tried?

[stephenkao]

Hmmm, hokay! Here's the context:

I have an online store with a set of products that can be added to or removed from the current user's wishlist. Using this.state.isOnWishList for optimistic feedback was fine as long as there was only one rendered component per product, but now I'm in a situation in which there can be multiple components rendered per product.

I render the product page like:

import React, { Component } from 'react';
import { graphql } from react-apollo;

const productQuery = gql`
  query Product($ids: [Int]) {
    products(ids: $ids) {
      id
      isOnWishList
      ...
    }
  }
`;

@graphql(productQuery)
class ProductPage extends Component { ... }

Now there's a WishlistButton that's deeply nested inside ProductPage:

import React, { Component } from 'react';
import { graphql } from react-apollo;

const addToWishListMutator = gql`
  mutation AddToWishList($productId: Int!) {
    addToWishlist (productId: $productId)
  }
`;

@graphql(addToWishListMutator, { name: 'addToWishList' })
class WishListButton extends Component {
  toggleWishList = (e) => {
    // Omitting removal for simplicity
    this.addToWishList();   
  }

  render() {
    const { product }  = this.props; // passed down through the hierarchy
    const { isOnWishList } = product;
    
    return (
        <button>
          { isOnWishList ? 'On Wish List' : 'Add to Wish List' }
        </button>
    );
  }
}

Now after clicking the WishListButton, it calls addToWishList, which makes the GraphQL mutation call. In my ideal case, just using dataIdFromObject in the Apollo client setup should make this mutation update the corresponding product record in the cache, and the button should update to say "On Wish List"...but it doesn't. I also added an updateQueries in the mutator decorator call, but it doesn't look like it's invoked ever. The only thing that's worked so far is explicitly defining another query productWishListQuery and passing down productWishListQuery.refetch to be invoked after the mutator is called.

Would you happen to know what's wrong with my setup?

[marktani]

This issue is outdated. Please open a new issue if you have problems.