CODEWITHSUNDEEP
reactjsapolloreact-apollo
HJW
HJW

Reputation: 1032

Query data doesn't update after successful apollo cache write

I have a query on my App.js:

import { gql } from 'apollo-boost';

const ALL_ITEMS_QUERY = gql`
  query ALL_ITEMS_QUERY {
    challenges {
      id
      title
    }
    goals {
      id
      title
      completed
      createdAt
      updatedAt
      steps {
        id
        completed
        title
      }
    }
  }
`;

And i am looking to write a simple deleteGoal mutation:

const DeleteWrapper = (props) => {
  const [deleteGoal, { data }] = useMutation(DELETE_ITEM_MUTATION, {
    update(cache, payload) {
      const data = cache.readQuery({ query: ALL_ITEMS_QUERY });

      data.goals = data.goals.filter(
        (goal) => goal.id !== payload.data.deleteGoal.id
      );

      cache.writeQuery({ query: ALL_ITEMS_QUERY, data });
    },
  });
}

The function returns the modified array correctly, but the item never disappears from the frontend list. I have a hunch that this is related to querying multiple categories at once (goals and challenges, rather than goals only).

Even though the cache seems to be modified correclty, why does the item never disappear, why does the re-render never happen?

Upvotes: 1

Views: 669

Answers (1)

HJW
HJW

Reputation: 1032

After some trial and error I found out that I have to lay out the exact data object to the writeQuery function. I don't really understand why, since the challenges object was left untouched after the query. I have not been able to make this work otherwise.

const DeleteWrapper = (props) => {
  const [deleteGoal] = useMutation(DELETE_ITEM_MUTATION, {
    update(cache, { data: { deleteGoal} }) {
      const { goals, challenges } = cache.readQuery({ query: ALL_ITEMS_QUERY });

      const newArr = goals.filter((goal) => goal.id !== deleteGoal.id);

      cache.writeQuery({
        query: ALL_ITEMS_QUERY,
        data: { challenges, goals: newArr },
      });

    },
  });
}

Upvotes: 1

Related Questions