TypeError: Cannot assign to read only property

[unutoiul]

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 is intentional. Directly mutating the cache would often result in buggy behavior, so in v3 the cache is now readonly. If you need to change the data in the cache you will now need to make copies of your data before mutating.

[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.

[dmngu9]

it only happens in local develpment but not in prod. Is that intended as well?

[yaquawa]

You can use cloneDeep of loash to copy the result.

[vnylbscr]

it only happens in local develpment but not in prod. Is that intended as well?

Yeah, its only appear on local development. When I deploy the project the errors not showing up.