Client Cache - Error: Could not identify object

Help
1

Client - React, Apollo-Client, codegen

Server - Postgraphile

The app view list of file objects.

Users can add new file.

I wrote a Query for getting the file objects from the server.

And a Mutation for adding new file.

they both works.

what Im trying to achieve is updating the cached files with the new file, and re-render the component that contain the FilesQuery hook.

I followed this doc: Mutations in Apollo Client - Apollo GraphQL Docs

but calling cache.writeFragment keep throwing the error:

Error: Could not identify object {"id":"de5b015b-28a8-4066-a5ed-44dcead659ed","createdAt":"2022-10-14T14:51:14.874548645","updatedAt":"2022-10...}

Files Query

query FileUploads(
  $offset: Int = 0
  $first: Int = 10
  $orderBy: [FileUploadsOrderBy!] = [CREATED_AT_DESC]
  $filter: FileUploadFilter
) {
  fileUploads(
    first: $first
    offset: $offset
    orderBy: $orderBy
    filter: $filter
  ) {
    totalCount
    nodes {
      id
      uploaderOrgId
      uploadFileType
      counterPartiesCount
      parsedPointsCount
      effectiveDate
      originalFileName
      configFileName
      createdAt
      status
      partiesIds
      parsedFileUrl
      uploadingOrg {
        id
        shortName
      }
      entitiesAndCps {
        entities {
          id
          shortName
        }
        cps {
          id
          shortName
        }
      }
    }
  }
}

Table Compoent (Calls FileUploadsQuery)

const FileUploadsTable = () => {
  const { data, loading, error } = useFileUploadsQuery();
...
}

Files Mutation - adding a file

useUploadToServiceMutation({
update(cache, { data }) {
      cache.modify({
        fields: {
          fileUploads(existingFileUploads = {}) {
            const newFileUplodsRefs = (
              data?.uploadToService?.result as any[]
            ).map((file) => {
              return cache.writeFragment({
                data: file,
                fragment: gql`
                  fragment NewFileUpload on FileUpload {
                    id
                    uploaderOrgId
                    uploadFileType
                    counterPartiesCount
                    parsedPointsCount
                    effectiveDate
                    originalFileName
                    configFileName
                    createdAt
                    status
                    uploadingOrg {
                      id
                      shortName
                    }
                    entitiesAndCps {
                      entities {
                        id
                        shortName
                      }
                      cps {
                        id
                        shortName
                      }
                    }
                  }
                `,
              });
            });
            return [
              ...(newFileUplodsRefs as any[]),
              ...(existingFileUploads?.nodes || []),
            ];
          },
        },
      });
    },
})

I managed to bypass the error by passing by adding id, like so:

cache.writeFragment({
                id: `FileUpload:${file.id}`, <--
                data: file,
                fragment: gql`
                  fragment NewFileUpload on FileUpload {
                    id
                  }
                `,
              });

also since the fileUploads is object not array i changed the update return value to this:

return {
              nodes: [
                ...newFileUplodsRefs,
                ...(existingFileUploads?.nodes || []),
              ],
            };

still I don’t see re-render in the FilesTable, the component that query the fileUploads.

attching image of CACHE from the apollo dev tools

image
image1920×1070 127 KB