TypeError: Cannot assign to read only property

I’m keep getting this error

const { data, client } = useQuery(GET_GROUPS);
const onSkillSelect = id => {
  setSkill({ variables: { id, skills: props.skills } });
};

const toggleSwitch = () => {
  data.dataGroups[props.id].isSkillsDisabled = false;
  client.writeData({ data: data });
}

when i’m trying to mutate something from the cache.

Uncaught TypeError: Cannot assign to read only property 'isSkillsDisabled' of object '#<Object>

I’m using 3.0 beta client react

import { gql, useMutation, useQuery } from '@apollo/client';

any idea how to override the cache?

[dylanwulf]

this should work:

const { data, client } = useQuery(GET_GROUPS);
const onSkillSelect = id => {
  setSkill({ variables: { id, skills: props.skills } });
};

const toggleSwitch = () => {
  const newDataGroups = [...data.dataGroups];
  newDataGroups[props.id] = { ...newDataGroups[props.id], isSkillsDisabled: false };
  const newData = { ...data, dataGroups: newDataGroups };
  client.writeData({ data: newData });
}

[benjamn]

The Apollo Client 2.6 blog post explains the benefits of immutability, and why it’s becoming mandatory in Apollo Client 3.0: https://blog.apollographql.com/whats-new-in-apollo-client-2-6-b3acf28ecad1

any idea how to override the cache?

If your first instinct in response to an error like this is to “override” the library that’s giving you the error, you’re starting off on the wrong foot. Please try to understand what’s going on first, or at least realize that the errors may be for your own good, before you jump to conclusions about possible workarounds. This issue tracker is for tracking bugs and features in the Apollo Client library, not a help desk for quick solutions to common problems that could be solved by reading the documentation on your own time.