# React component not re-render after cache.modify/cache.writeQuery

**URL:** <https://community.apollographql.com/t/react-component-not-re-render-after-cache-modify-cache-writequery/6381>\
**Category:** Client SDKs\
**Tags:** client, web\
**Created:** [June 21, 2023, 10:08am UTC](https://community.apollographql.com/t/react-component-not-re-render-after-cache-modify-cache-writequery/6381 "2023-06-21T10:08:25Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![imarabinda](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/imarabinda/32/4364_2.png) [@imarabinda](https://community.apollographql.com/u/imarabinda)\
**Post date:** [June 21, 2023, 10:08am UTC](https://community.apollographql.com/t/react-component-not-re-render-after-cache-modify-cache-writequery/6381/1 "2023-06-21T10:08:25Z")

</div>

```auto
const [createAssetMutation, createAssetMutationResult] = useMutation(
    CREATE_ASSET_MUTATION,
    {
      update(cache, result) {
        cache.modify({
          id: "Project:" + projectId,
          fields: {
            assets: (previousData, { toReference }) => {
              return [...previousData, toReference(result.data.createAsset)];
            },
          },
        });
      },
    }
  );

```

I have a mutation that creates asset inside project, i wanted to add the created asset inside project assets field in cache. I tried to do that cache is updated but the component not re-rendered.

Can anyone help me how to proper write the new data to cache and re-render the component?

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [June 21, 2023, 1:30pm UTC](https://community.apollographql.com/t/react-component-not-re-render-after-cache-modify-cache-writequery/6381/2 "2023-06-21T13:30:12Z")

</div>

Can you show the code of the component that is not rerendering?

---

<div class="post-metadata">

**Author:** ![imarabinda](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/imarabinda/32/4364_2.png) [@imarabinda](https://community.apollographql.com/u/imarabinda)\
**Post date:** [June 23, 2023, 6:03am UTC](https://community.apollographql.com/t/react-component-not-re-render-after-cache-modify-cache-writequery/6381/3 "2023-06-23T06:03:27Z")

</div>

i’m using lazyQuery

```auto
  const [fetchProjectAssets, { data, error, refetch }] = useLazyQuery<
    SingleProjectQueryGqlResponse,
    SingleProjectQueryGqlVariable
  >(SingleProjectQueryGql);

```

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [June 23, 2023, 9:07am UTC](https://community.apollographql.com/t/react-component-not-re-render-after-cache-modify-cache-writequery/6381/4 "2023-06-23T09:07:07Z")

</div>

Please show the full component, as well as the queries, not just the variable names. It’s really hard to get a full picture with this little information.

---

<div class="post-metadata">

**Author:** ![imarabinda](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/imarabinda/32/4364_2.png) [@imarabinda](https://community.apollographql.com/u/imarabinda)\
**Post date:** [June 23, 2023, 1:21pm UTC](https://community.apollographql.com/t/react-component-not-re-render-after-cache-modify-cache-writequery/6381/5 "2023-06-23T13:21:47Z")

</div>

**Here is the component**

```auto
export default function Projects() {
  const [fetchProjects, { data }] = useLazyQuery<
    UserProjectsQueryClientGqlResponse,
    UserProjectsQueryClientGqlVars
  >(UserProjectsQueryClientGql);

  const [projects, setProjects] = useState<Partial<DashboardProject>[]>([]);
  const { setPageFilterConfigs } = useFilters();

  useEffect(() => {
    //setting projects
    if (data?.projects) {
      setProjects(data.projects);
    }
  }, [data?.projects]);

  useEffect(() => {
    //this filter config is runs first time automatically when the page is loaded
    //this is for filter configs
    setPageFilterConfigs(FilterTypes.dashboard, {
      fetch: (variables) => fetchProjects(variables),
      searchStringVariable: "searchKeyword",
      //default variables
      defaultVariables: {
        states: ProjectStateEnum.Active,
      },
    });
  }, []);

  return (
    <div className="main-wrapper">
      {projects?.map((project) => (
        <div key={project.id} className="project-container">
          <h1>{project.name}</h1>
          <div className="assets">
            {project.assets?.map((asset) => (
              <div key={asset.id}>{asset.name}</div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

```

**Query:**

```auto

const UserProjectsQueryClientGql = gql`
  query UserProjectsQueryClient(
    $searchKeyword: String = ""
    $states: [ProjectStateType!]
  ) {
    projects(
      where: {
        AND: [
          {
            OR: [
              { name: { contains: $searchKeyword, mode: insensitive } }
              {
                assets: {
                  some: {
                    name: { contains: $searchKeyword, mode: insensitive }
                  }
                }
              }
            ]
          }
          { OR: [{ state: { in: $states } }] }
        ]
      }
      orderBy: [{ name: asc }]
    ) {
      id
      name
      assets(orderBy: { position: asc }) {
        id
        name
      }
    }
  }
`;

```

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [June 23, 2023, 1:46pm UTC](https://community.apollographql.com/t/react-component-not-re-render-after-cache-modify-cache-writequery/6381/6 "2023-06-23T13:46:18Z")

</div>

Just to make sure it isn’t caused by that `useEffect`+`useState` combination, could you please replace that with

```auto
const projects = data?.projects || EMPTY_ARR;

```

where `EMPTY_ARR` is a constant you define above your component like

```auto
const EMPTY_ARR = []

```

?

That is pretty much equivalent, but saves you one unnecessary rerender.

Also, if I might ask: how do you determine if the component rerenders? Have you placed a `console.log(projects)` inside the component?

---

<div class="post-metadata">

**Author:** ![imarabinda](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/imarabinda/32/4364_2.png) [@imarabinda](https://community.apollographql.com/u/imarabinda)\
**Post date:** [June 23, 2023, 2:42pm UTC](https://community.apollographql.com/t/react-component-not-re-render-after-cache-modify-cache-writequery/6381/7 "2023-06-23T14:42:51Z")

</div>

> [@lenz](#):
>
> how do you determine if the component rerenders

I have checked by doing the way you have told me, but didn’t work. if i return empty array from the cache modify then the component re-rendered, but whenever i’m adding new array with items it is not working.

re-rendered for this code

```auto
cache.modify({
          id: "Project:" + projectId,
          fields: {
            assets: (previousData, { toReference }) => {
              return [];
            },
          },
        });

```

---

<div class="post-metadata">

**Author:** ![Justin\_Gonzalez](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/justin_gonzalez/32/5359_2.png) [@Justin\_Gonzalez](https://community.apollographql.com/u/Justin_Gonzalez)\
**Post date:** [February 6, 2025, 8:48pm UTC](https://community.apollographql.com/t/react-component-not-re-render-after-cache-modify-cache-writequery/6381/8 "2025-02-06T20:48:46Z")

</div>