optimisticResponse freezes / lags UI

I’m not 100% sure this is a bug, but whenever we use optimisticResponse on a mutation hook the UI will freeze for ~500-1000ms. Removing the optimisticResponse will render the UI updates without any lag – the feedback is instant.

For example, a user selects an option from a dropdown and the dropdown will only close 500ms after they’ve selected. If we remove the optimisticResponse the dropdown closes immediately.

I was wondering if anyone’s had this issue and if there’s a workaround? We want to update the UI as the user selects an option but can’t because of the lag.

Here’s an example of of a mutation with an optmisticResponse that would delay an UI updates

updateUser({
  variables: {
    userID: user.id,
    name: newName,
  },
  optimisticResponse: {
    __typename: 'Mutation',
    updateUser: {
      ...user,
      name: newName,
    },
  },
  update: updateUserCache,
})

–

"apollo-cache-inmemory": "^1.6.5",
"apollo-client": "^2.6.8",
"apollo-link": "^1.2.13",
"apollo-link-batch-http": "^1.2.13",
"apollo-link-context": "^1.0.19",
"apollo-link-error": "^1.1.12",
"apollo-link-http": "^1.5.16",
"apollo-link-ws": "^1.0.19",
"apollo-utilities": "^1.3.3",

"react": "^16.13.1",
"react-dom": "^16.13.1",

[brotzky]

We were able to get around this through various changes to our app. The largest change was breaking down one massive query we had into lots of smaller queries. We should’ve done this in the beginning but were fairly new to GraphQL when we started. By breaking down the cache into smaller pieces I’m guessing each update now only updates a small portion of the cache instead of a huge object. We also doubled down on React.useMemo which seems to have helped with components that would receive updates but didn’t need to re-render. Lastly we trimmed down some views and tried our best to keep the DOM as light as possible.

With those three updates things are feeling a lot faster and we haven’t run into massive lag issues.

[BitFlippa27]

Hey brotzky, i got the same problem right now. Can i ask how you broke down your massive query ?

In my example i got a Query FETCH_CITIES_QUERY which gets me around 25 000 entries of cities. I assume that Optimistic UI doesn’t work well with such large data sets. Do you know why ? The thing is when removing Optimistic UI, the UI gets suprisingly updated immediately, even though it has to update the cache too. As far as i know, the only difference with Optimistic UI is, that it runs the update function twice, once it updates the cache with the optimistic response and then secondly when the real response from the server comes back. Maybe its slow because it reads and writes to the cache twice ?