React Apollo using Named Variable

Question

Im trying to export a named gql query to be used in another react component in order to call it to update the apollo cache. The code works if I use PRODUCTS_QUERY since I export const PRODUCTS_QUERY. However, I would prefer to use the named gql variable 'productsQuery' for better naming convention. However, when I use 'productsQuery' in place of PRODUCTS_QUERY, it will throw an error. Anyone has successfully used the named variable? Please advise. Thanks in advance

In Home.js

export const PRODUCTS_QUERY = gql`
  {
    products {
      id
      price
      pictureUrl
      name
    }
  }
`;

export default graphql(PRODUCTS_QUERY, { name: "productsQuery" })(Home);

In AddProduct.js

// import { PRODUCTS_QUERY } from "./Home";
   import { productsQuery } from "./Home";

 try {
      let response = await this.props.mutate({
        variables: {
          name,
          price,
          picture
        },

//  - - - - - - - - THIS PART WORKS - - - - - - -
        // update: (store, { data: { createProduct } }) => {
        //   const data = store.readQuery({ query: PRODUCTS_QUERY });
        //   data.products.push(createProduct);
        //   store.writeQuery({ query: PRODUCTS_QUERY, data });
        // }

//  - - - - - - - - THIS PART FAILS - - - - - - -
        update: (store, { data: { createProduct } }) => {
          const data = store.readQuery({ query: productsQuery });
          data.products.push(createProduct);
          store.writeQuery({ query: productsQuery, data });
        }
      });
      console.log("RESPONSE", response);
    } catch (err) {
      console.log("ERROR", err);
    }

    this.props.navigation.navigate("Home");
  };

Any way I can export in a manner which allows me to use named variable 'productsQuery' rather than 'PRODUCTS_QUERY' since purpose of naming is to make naming convention standardized. Thanks in advance

Please post the error message. Also, is this the working code, or the code that doesn’t work? — Tal Z
Hi. Above codes work. However, i prefer to use named variable 'productsQuery' rather than 'PRODUCTS_QUERY' (which is seen in codes). Any idea how to use named variables for my gql query n mutation in my update store function? — Hendry Lim
If you post the code that doesn't work and the error message, it will be easier to figure out what is the problem. Otherwise, I can only guess. — Tal Z
Hi Tal Z, i have amended the source code to highlight the working codes and non-working codes. Thanks :) — Hendry Lim

Tal Z Tal Z · Accepted Answer · 2018-03-08T12:11:29

In your Home.js file you exported 2 things:

The query with the name PRODUCTS_QUERY
The graphql operation as the default

The way it is written now, you cannot import { productsQuery } since you didn't export anything with that exact name.

The name option you set in your graphql operation ({ name: "productsQuery" }) is not related to what you are describing. That option affects the prop name that the component will receive with the data from the query.

A few options to make it work:

Rename PRODUCTS_QUERY to productsQuery in Home.js and use the same import.
you can assign and export productsQuery instead of PRODUCTS_QUERY in your Home.js, like so:

export const productsQuery = PRODUCTS_QUERY;
If you don't want to change Home.js, you can change your import to something like:

import { PRODUCTS_QUERY: productsQuery } from "./Home";

There are probably more ways to do that.

React Apollo using Named Variable

2 Answers