const typeDefs = gql`            
  extend type Spell {
    isSelected: Boolean
  }
`

const SpellResolver = {
  isSelected: (spell: Spell) =>
    spell.isSelected === undefined ? 
      false : spell.isSelected,
}

const resolvers = {
  Spell: SpellResolver,
}

query spells($path: String) {
  spells @rest(type: "Spell", path: $path) {
    id
    spell
    type
    effect
    isSelected @client
  }
}

const Mutation = {
 setSpellSelect: 
  (parent, args, { cache, getCacheKey }) => {
   const id = getCacheKey({ 
    __typename: 'Spell', 
    id: args.id 
   })
   const fragment = gql`
    fragment SpellSelected on Spell {
     isSelected @client
    }
   `
   const spell = cache.readFragment({ fragment, id })
   const data = { ...spell, isSelected: !spell.isSelected}
   cache.writeFragment({ id, data })
 }
}

const resolvers = {
  Spell: SpellResolver,
  Mutation
}

mutation toggleSpellSelect($id: ID) {
  setSpellSelect(id: $id) @clint {
    id
  }
}

cache.writeData({
  data: {
    theme: {
      mode: 'light',
      __typename: 'Theme'
    }
  }
})

const typeDefs = gql`
  //...
  
  type Theme {
    mode: String
    __typename: String
  }
  
  extend type Query {
    theme: Theme
  }
`

query getTheme {
  theme @client {
    mode
  }
}

const Mutation = {
  //...
  setTheme: (_: any, __: any, { cache }: Context) => {
    const query = GET_THEME;
    const prev = cache.readQuery({ query });
    const data = {
      ...prev,
      theme: {
        ...prev.theme,
        mode: prev.theme.mode === 'light' ? 
              'dark' : 'light',
      },
    };
    cache.writeQuery({ query, data });
  },
};

mutation setTheme {
  setTheme @client {
    mode
  }
}