"Reached maximum amount of queued data" in Safari

[elindgren]

Hi! I have a file upload in my React app that looks something like this:

const updateImage = async (
  event: React.ChangeEvent<HTMLInputElement>,
  where: { id: string },
  updateMutation: (update: ImageUpdate) => void,
) => {
  const { files, validity } = event.target
  if (files && files.length === 1 && validity.valid) {
    updateMutation({ variables: { ...where, arg: files[0] } })
  }
}

which has the following mutation:

const UPDATEQUESTIONIMAGE = gql`
  mutation UpdateQuestionImage($id: ID!, $arg: Upload!) {
    updateQuestion(id: $id, data: { image: $arg }) {
      id
      imageUrl
    }
  }
`

const [updateImageMutation, { loading: imageLoading }] = useMutation(UPDATEQUESTIONIMAGE, {
    refetchQueries: refetchQueries,
    awaitRefetchQueries: true,
 })

This code works great in Chrome and Firefox, but errors in Safari (version 17.2.1) with the following error:

[Error] Reached maximum amount of queued data of 64Kb for keepalive requests
(anonymous function) (apollo-upload-client.js:243)
Subscription2 (chunk-5MUEPWQV.js:1008)
subscribe (chunk-5MUEPWQV.js:1069)
(anonymous function) (@apollo_client_link_error.js:25)
Subscription2 (chunk-5MUEPWQV.js:1008)
subscribe (chunk-5MUEPWQV.js:1069)
(anonymous function) (@apollo_client_link_context.js:29)

from createUploadLink.js:208. To me it seems like there is some sort of configuration I should perform, but looking at the exampels in this repo that doesn't look like it's possible/needed? Has anyone else encountered this before?

[jaydenseric]

I've never seen this kind of error before, but maybe it has something to do with the fetch option keepalive?

Here is an explanation of it:

https://javascript.info/fetch-api#keepalive

Perhaps try setting keepalive to false in your fetch options.

[jaydenseric]

Closing because it seems as per the above comment, the culprit was likely the fetch option keepalive being set to true, which isn't a default for fetch or something this package does. When someone customises fetch options in their project it is up to them to be aware of all of the consequences, although I too find this gotcha a little surprising.

In theory, I guess the upload terminating link could detect that the fetch options has keepalive set to true, and if it's a GraphQL multipart request console.warn about the risks. It's a bit tricky to try to sniff how big the multipart request is and try to guess what the browser limit might be to conditionally warn, and it might annoy people sending small files that are within the limits to be warned all the time. So then you might want to make the warnings configurable. All of this is adding complexity that increases bundle size for everyone; even people not using keepalive. So at most we might be able to update the readme to explain this gotcha somewhere in the setup section, or a new "gotchas" or "tips" section.