Slow function call to store

[RealSilo]

My function calls to the store are slow for some reason. I wonder if it's a config issue.

When the function is called updateDashboardState I print out the time that takes to check how long it takes to update the cache. It is around 3-4 ms which is great.

On the other hand when I invoke the function and check the time between the function call and the return it is around 500ms which is terrible.

Apparently the reconciliation called 3 times instead of 1 (or 2). The cached data seems to be the same though. Any workarounds?

Could be related to this issue:

apollographql/apollo-client#4077

const handleSearchUpdate = async (event) => {
  const searchTerm = event.target.value;

  const time = new Date();
  await updateDashboardState({
    variables: { search: searchTerm }
  });
  **console.log(new Date() - time); // THIS IS 500ms WHICH IS TERRIBLE**
};

const typeDefs = `
  type FilterType {
    ${[VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_BY]}: String
    ${[VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_DATE_START]}: String
    ${[VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_DATE_END]}: String
    ${[VEHICLE_FILTER_ATTRIBUTES.WITH_ALERTS]}: Boolean
    ${[VEHICLE_FILTER_ATTRIBUTES.WITH_SERVICE_DUE]}: Boolean
  }
`;

const stateLink = withClientState({
  cache,
  resolvers: {
    Mutation: {
      updateVehicleState: (_, { state }, { cache }) => {
        const data = {
          vehicleState: {
            __typename: 'VehicleState',
            state
          }
        };
        cache.writeData({ data });
        return null;
      },
      updateDashboardState: (_, { activeOrderAttribute, displayOrder, filters, search }, { cache }) => {
        const startTime = new Date();
        const dashboardStateQuery = gql`
          query {
            dashboardState @client {
              activeOrderAttribute
              displayOrder
              filters {
                ${[VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_BY]}
                ${[VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_DATE_START]}
                ${[VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_DATE_END]}
                ${[VEHICLE_FILTER_ATTRIBUTES.WITH_ALERTS]}
                ${[VEHICLE_FILTER_ATTRIBUTES.WITH_SERVICE_DUE]}
              }
              search
            }
          }
        `;
        
        const { dashboardState } = cache.readQuery({ query: dashboardStateQuery });

        const data = {
          dashboardState: {
            __typename: 'DashboardState',
            activeOrderAttribute: activeOrderAttribute || dashboardState.activeOrderAttribute,
            displayOrder: displayOrder || dashboardState.displayOrder,
            search: search !== undefined ? search : dashboardState.search,
            filters: {
              __typename: 'FilterType',
              [VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_BY]: !!filters ? filters[VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_BY] : dashboardState.filters[VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_BY],
              [VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_DATE_START]: !!filters ? filters[VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_DATE_START] : dashboardState.filters[VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_DATE_START],
              [VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_DATE_END]: !!filters ? filters[VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_DATE_END] : dashboardState.filters[VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_DATE_END],
              [VEHICLE_FILTER_ATTRIBUTES.WITH_ALERTS]: !!filters ? filters[VEHICLE_FILTER_ATTRIBUTES.WITH_ALERTS] : dashboardState.filters[VEHICLE_FILTER_ATTRIBUTES.WITH_ALERTS],
              [VEHICLE_FILTER_ATTRIBUTES.WITH_SERVICE_DUE]: !!filters ? filters[VEHICLE_FILTER_ATTRIBUTES.WITH_SERVICE_DUE] : dashboardState.filters[VEHICLE_FILTER_ATTRIBUTES.WITH_SERVICE_DUE]
            }
          }
        };

        cache.writeData({ data });
        console.log("START");
        **console.log(new Date() - startTime); // THIS IS 3-4ms WHICH IS GREAT**
        return null;
      }
    }
  },
  defaults: {
    vehicleState: {
      __typename: 'VehicleState',
      state: 'active'
    },
    dashboardState: {
      __typename: 'DashboardState',
      activeOrderAttribute: VEHICLE_SORT_ATTRIBUTES.VEHICLE_ALERTS_COUNT,
      displayOrder:
        VEHICLE_LIST_SORT_ATTRIBUTES[VEHICLE_SORT_ATTRIBUTES.VEHICLE_ALERTS_COUNT].defaultOrder,
      filters: {
        __typename: 'FilterType',
        [VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_BY]: null,
        [VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_DATE_START]: null,
        [VEHICLE_FILTER_ATTRIBUTES.LAST_CONTACTED_DATE_END]: null,
        [VEHICLE_FILTER_ATTRIBUTES.WITH_ALERTS]: false,
        [VEHICLE_FILTER_ATTRIBUTES.WITH_SERVICE_DUE]: false
      },
      search: ''
    }
  },
  typeDefs
});