Bdtjtk

This snippet appears long but is actually simple; it creates a node and renders its data and then updates the node and renders the updated data, but the data from the creation doesn't get updated, even though inspecting the store directly shows that the store for the createFoo query has been updated. I would like to understand how to ensure that components relying on data from the Apollo Client store are up to date, preferably automatically.

const CREATE_FOO = gql`

  mutation {

    createFoo(data: {}) {

      id

      bar

    }

  }

`;



const UPDATE_FOO = gql`

  mutation($id: ID!) {

    updateFoo(where: { id: $id }, data: { bar: "baz" }) {

      id

      bar

    }

  }

`;



<Mutation mutation={CREATE_FOO}>

  {(createFoo, { data: createData }) => {

    if (createData) {

      return (

        <div>

          <p>{JSON.stringify(createData.createFoo)}</p>

          <Mutation

            mutation={UPDATE_FOO}

            variables={{ id: createData.createFoo.id }}

          >

            {(updateFoo, { data: updateData }) => {

              if (updateData) {

                return <p>{JSON.stringify(updateData.updateFoo)}</p>;

              }

              return (

                <button onClick={updateFoo} type="button">

                  updateFoo

                </button>

              );

            }}

          </Mutation>

        </div>

      );

    }

    return (

      <button onClick={createFoo} type="button">

        createFoo

      </button>

    );

  }}

</Mutation>

Data model:

type Foo {

  id: ID! @unique

  bar: String

}

Store data:

{

  "ROOT_QUERY": {

    "userSidebarWidth": 200

  },

  "Foo:cjqd2cd41zi140a98ugrjpz2m": {

    "id": "cjqd2cd41zi140a98ugrjpz2m",

    "bar": "baz",

    "__typename": "Foo"

  },

  "ROOT_MUTATION": {

    "createFoo({"data":{}})": {

      "type": "id",

      "generated": false,

      "id": "Foo:cjqd2cd41zi140a98ugrjpz2m",

      "typename": "Foo"

    },

    "updateFoo({"data":{"bar":"baz"},"where":{"id":"cjqd2cd41zi140a98ugrjpz2m"}})": {

      "type": "id",

      "generated": false,

      "id": "Foo:cjqd2cd41zi140a98ugrjpz2m",

      "typename": "Foo"

    }

  }

}

Let's assume you have a Query component like this:

const GET_FOO = gql`

  query SomeQuery {

    getFoo {

      id

      bar

    }

  }

`;



<Query query={GET_FOO}>

  {({ loading, error, data }) => (

    <SomeComponent/>

  )}

</Query>

When the component is mounted, Apollo fetches data from the server or the cache (depending on whether the data is cached and what your fetch policy is). However, it also subscribes to changes in the cache. So if you fetched a Foo with an id of 1 and it's updated in the cache through another operation, the component will be notified of them and will update accordingly. Specifically, the data value passed to the render prop function will be changed to reflect the change in the cache.

A Mutation component has a render prop function signature similar to the Query component, including a data property. However, this property only reflects the data returned when the mutate function is called. While the results of the mutation are stored in the cache, the data exposed through the Mutation component is not the result of a subscription to the cache -- rather, it's just a convenient way to react to the results from the mutate call. The only time the data inside the Mutation component will potentially change is if the mutate function is called again.

If we modify your example and wrap the components in a Query component, we can show the data from the query inside your component and potentially ignore the data from either of the two Mutation components. Assuming the Query and the Mutations reference the same item in the cache, the data from the Query component will be updated any time one of the mutations resolves.