Local state resolvers with reactive data

Hi 👋

I’m playing around with Apollo’s Local State Management feature and I found a strange behaviour that has not been made clear in the documentation. Could you help me understand if this is a bug, or if it’s by design and if there’s a workaround?

Here it is:

• I have an Apollo Server with these typeDefs:

  type Query {
    greetings: [Greeting]
  }

  type Greeting {
    word: String
  }

• the Apollo client is set with a local resolver and a local state:

const client = new ApolloClient({
  // ...
  defaultOptions: {
    query: {
      fetchPolicy: "network-only"
    },
  },
  resolvers: {
    Greeting: {
      name: (parent, args, { client }) => {
        const state = client.readQuery({
          query: gql`
            query StateQuery {
              localState {
                value
              }
            }
          `
        });

        return state.localState.value;
      }
    }
  }
});

client.writeData({
  data: {
    localState: {
      __typename: "LocalState",
      value: "John"
    }
  }
});

With this setup, everything is ok on the first query with react-apollo hook:

const { data } = useQuery(gql`
  query ComponentQuery {
    localState @client {
      value
    }
    greetings {
      name @client(always: true)
      word
    }
  }
`);

console.log(data);
/* {
  "localState": {
    "value": "John",
    "__typename": "LocalState"
  },
  "greetings": [
    {
      "name": "John",
      "word": "Hello",
      "__typename": "Greeting"
    },
    {
      "name": "John",
      "word": "Welcome",
      "__typename": "Greeting"
    }
  ]
} */

But when I update the local state with:

client.writeQuery({
  query: STATE_QUERY,
  data: {
    localState: { __typename: "LocalState", value: "Foo" }
  }
});

The previous query is correctly re-run, but the local field name has not been updated:

console.log(data);
/* {
  "localState": {
    "value": "Foo",
    "__typename": "LocalState"
  },
  "greetings": [
    {
      "name": "John",
      "word": "Hello",
      "__typename": "Greeting"
    },
    {
      "name": "John",
      "word": "Welcome",
      "__typename": "Greeting"
    }
  ]
} */

You can find a Sandbox set up here: https://codesandbox.io/s/apollo-local-state-management-5dy2f?fontsize=14&module=%2Fsrc%2FApolloProvider.tsx

Is it intended? Do you plan on supporting this kind of feature?

Thank you for your help!

[dcecile]

@freshollie OK I understand now, thanks 🙏

I’d be nice if Apollo treated readQuery inside of a local resolver as a “watch query”, just like useQuery inside of React component.

My feature request is if the source of readQuery changes and the local resolver is still in use by some React component’s useQuery, then the local resolver would automatically re-run and its results get sent to the React component.

This way I wouldn’t need to do all of the bookkeeping and updating myself (i.e. which React components are active, which fragments they use, which local resolvers of those fragments are used, and how to recalculate the results of all those local resolvers).

[freshollie]

@dcecile Please see: https://codesandbox.io/s/apollo-local-state-management-zrwel

The writeQuery should not only update the localState, but also update all greetings objects in the cache in order to achieve the desired effect.

The reason the @client(always: true) doesn’t work is because the overall greetings query has already been cached, so any subsequent queries are not going to execute the name resolver.