Using FieldPolicy's with Mutations

Help
,
1

Hello, I’d like for my development process to be completely divorced from the backend right now. Is there a way to configure FieldPolicy’s so that my mutations are handled entirely through the client-side cache? For example, a mutation that adds a rocket to a list of rockets. Do I need a typePolicy for the mutation AddRocket?

A small codesanbox with a single type, query, and mutation is here: https://codesandbox.io/s/empty-hill-5huhr

For example

new InMemoryCache({
  typePolicies: {
    Rocket: {
      fields: {
        description: {
          read() {
            return "Placeholder rocket description";
          }
        }
      }
    },

    Query: {
      fields: {
        allRockets: {
          read() {
            // make some random rockets
            const result = Array.from(Array(2).keys()).map((_, index) => ({
              description: `Placeholder ${index}`,
              id: `key-${index}`,
              type: `Big Rocket #${index}`
            }));
            console.log(result);
            return result;
          }
        }
      }
    },

    Mutation: {
      fields: {
        AddRocket: {
          read(_, { args }) {} // what goes here???
        }
      }
    }
  }
})

I see that there has been some discussion of this topic elsewhere in the past, but that discussion is currently unresolved: https://spectrum.chat/apollo/apollo-client/how-to-use-mutations-with-local-only-fields~faa0c796-8f10-4c13-bae1-be7fe559c5fa

2

There’s an open github issue that suggests what I’m asking to do is specifically and intentionally impossible: Deprecation of local resolvers makes adopting GQL more difficult · Issue #7072 · apollographql/apollo-client · GitHub

That’s pretty scary.

3

Hello! As one option to simulate operation results on the client side before connecting to a backend, you can wrap your React app in the MockedProvider component instead of ApolloProvider. You can then define mocked responses for each operation in your app. Docs on MockedProvider

If you only want to mock some operations and want others to hit a backend, you can use Apollo Link to create a link chain that routes different operations to either an HttpLink (to hit your backend) or a MockLink (to return a local mocked response). MockedProvider uses MockLink under the hood for all operations by default.

1 Like
4

Ok that makes sense. I was avoiding MockedProvider because it returns results asynchronously, which was breaking my visual diff testing of components. I’ll explore my options, thanks!