Apollo-module: mutation not working with Client state ( apollo-link-state) configuration

[gbouteiller]

Hello,
I'm trying to use the module with apollo-link-state in order to replace vuex with graphql. I can query from the cache but when I try to mutate, I get a warning : Missing field updateColor in {}.

/** package.json **/

{
  "name": "apollo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "nuxt"
  },
  "dependencies": {
    "@nuxtjs/apollo": "^4.0.0-beta.5",
    "graphql-tag": "^2.9.2",
    "nuxt": "^1.4.1"
  }
}

/** nuxt.config.js **/

  apollo: {
    clientConfigs: {
      default: {
        clientState: {
          defaults: {
            color: 'red',
          },
          resolvers: {
            Mutation: {
              updateColor: (_, { color }, { cache }) => {
                const data = { color };
                cache.writeData({ data });
                return data;
              },
            },
          },
        },
        httpEndpoint: 'http://localhost:4000', //not used but required
      },
    },
  },
  modules: ['@nuxtjs/apollo'],
};

/** pages/index.vue **/

<template>
  <div>
    <h1>{{color}}</h1>
    <button @click="updateColor">Update</button>
  </div>
</template>

<script>
  import gql from 'graphql-tag';

  export default {
    apollo: {
      color: gql`
        query {
          color @client
        }
      `
    },
    methods: {
      updateColor: function() {
        this.$apollo.mutate({
          mutation: gql`
            mutation($color: String!) {
              updateColor(color: $color) @client
            }
          `,
          variables: { color: 'green' },
        });
      }
    }
  }
</script>

If I replace apollo-module by the vue-apollo plugin with ssr: false, it works.
Any help would be appreciated. Thank you.

_{This question is available on Nuxt community (#c102)}

[cmty[bot]]

This issue as been imported as question since it does not respect apollo-module issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/apollo-module/issues/c102.

[gbouteiller]

After investigation, it is due to :

/** @nuxtjs/apollo/lib/templates/plugin.js : l.18 **/

var currentOptions = <%= JSON.stringify(options.clientConfigs[key], null, 2) %>

In fact, options are stringified so every function inside is removed. That's why updateColor doesn't exist. Consequently, the problem isn't only for client state but every function defined in options.

[dohomi]

@gbouteiller thats an interesting case: I fixed one issue in one of the beta releases as you can see here: https://github.com/nuxt-community/apollo-module/blob/master/lib/templates/plugin.js#L22 It would be interesting to know how that line needs to be for being parsed correctly

var currentOptions = <%= JSON.stringify(options.clientConfigs[key], null, 2) %>

@Atinux @pi0 could you help out how to parse options correctly if there are functions present inside of the options?

[gbouteiller]

@dohomi it outputs

Syntax Error: SyntaxError: C:/Coding/Nuxt/apollo/.nuxt/apollo-module.js: Unexpected token, expected , (20:40)

[dohomi]

@gbouteiller I published a new release https://github.com/nuxt-community/apollo-module/releases/tag/v4.0.0-beta.6 Now you should be able to provide a path to your config. Does it fix your current issues?

[gbouteiller]

@dohomi it works like a charm!! Thank you for your dedication and great work!