Why is cache.readQuery returning null?-CodePudding

I have a project management application built with React and GraphQL for which the Github repo can be found

I am trying to update the cache when I delete an individual project.

const [deleteProject] = useMutation(DELETE_PROJECT, {
  variables: { id: projectId },
  update(cache, { data: { deleteProject } }) {
    const { projects } = cache.readQuery({ query: GET_PROJECTS });
    cache.writeQuery({
      query: GET_PROJECTS,
      data: {
        projects: projects.filter(
          (project) => project.id !== deleteProject.id
        ),
      },
    });
  },
  onCompleted: () => navigate("/"),
});

However, when I attempt to do so, I am getting the following error: Error: Cannot destructure property 'projects' of 'cache.readQuery(...)' as it is null

Can someone help me figure out what's going on? This is what the getProjects query looks like:

const GET_PROJECTS = gql`
  query getProjects {
    projects {
      id
      name
      description
      status
    }
  }
`;

Here is the root query:

const RootQuery = new GraphQLObjectType({
  name: "RootQueryType",
  fields: {
    projects: {
      type: new GraphQLList(ProjectType),
      resolve(parent, args) {
        return Project.find();
      },
    },
    project: {
      type: ProjectType,
      args: { id: { type: GraphQLID } },
      resolve(parent, args) {
        return Project.findById(args.id);
      },
    },
    clients: {
      type: new GraphQLList(ClientType),
      resolve(parent, args) {
        return Client.find();
      },
    },
    client: {
      type: ClientType,
      args: { id: { type: GraphQLID } },
      resolve(parent, args) {
        return Client.findById(args.id);
      },
    },
  },
});

CodePudding user response：

It looks like the issue is with const { projects } = cache.readQuery({ query: GET_PROJECTS });. The error message says that projects is null, which means that cache.readQuery({ query: GET_PROJECTS }) is returning an object with a null value for the projects property.

One possible cause of this error is that the GET_PROJECTS query is not being executed before the deleteProject mutation. In order for the cache to have data for the GET_PROJECTS query, that query must be executed and the results must be stored in the cache.

You can fix this error by ensuring that the GET_PROJECTS query is executed before the deleteProject mutation. This can be done in a number of ways, depending on how your application is structured. One way to do it is to add the GET_PROJECTS query to the list of queries that are executed when the component that contains the deleteProject mutation is rendered. You can do this by using the useQuery hook in your React component.

Here is an example of how you could use the useQuery hook to execute the GET_PROJECTS query when the component is rendered:

const { data } = useQuery(GET_PROJECTS);

This code will execute the GET_PROJECTS query and store the results in the data variable. The data variable will be an object with a projects property that contains the list of projects.

Once the GET_PROJECTS query has been executed and the results are stored in the cache, the deleteProject mutation will be able to read the data from the cache and update it correctly.

CodePudding user response：

Projects may be null in some cases, so you should check for that before attempting to destructure it.

You can do that by adding a null check like this:

update(cache, { data: { deleteProject } }) {
const queryResult = cache.readQuery({ query: GET_PROJECTS });
if (queryResult && queryResult.projects) {
const { projects } = queryResult;
cache.writeQuery({
query: GET_PROJECTS,
data: {
projects: projects.filter(
(project) => project.id !== deleteProject.id
),
},
});
}
},

This will make sure that projects is not null before you try to destructure it.