# Client state

You can use local state for client-only local data with the related options of createApolloClient:

import gql from 'graphql-tag'
import { createApolloClient } from 'vue-cli-plugin-apollo/graphql-client'

const options = {
  // ...

  typeDefs: gql`
  type Query {
    connected: Boolean!
  }
  `,
  resolvers: {
    Mutation: {
      connectedSet: (root, { value }, { cache }) => {
        const data = {
          connected: value,
        }
        cache.writeData({ data })
      },
    },
  },
  onCacheInit: cache => {
    const data = {
      connected: false,
    }
    cache.writeData({ data })
  },
}

const { apolloClient } = createApolloClient(options)

Then you need to use the @client directive:

query isConnected {
  connected @client
}
mutation setConnected ($value: Boolean!) {
  connectedSet (value: $value) @client
}
Last Updated: 6/8/2020, 7:16:12 PM