Si tiene una consulta pendiente cuando se ejecuta una mutación con una optimisticResponse , la optimisticResponse no se aplica.
const {data, refetch} = useQuery(GET_TODOS); const [updateTodo] = useMutation(UPDATE_TODO); // in a form submit handler: refetch(); // Immediately mutate while the _query_ is pending updateTodo({ variables: { id, description: description + 1}, optimisticResponse: { updateTodo: { id, __typename: "Todo", description: description + 1 } } });Ejemplo mínimo de codesandbox.io . Se agregó un enlace de retraso artificial de 1 segundo para que el efecto sea más obvio.
El mismo comportamiento parece ocurrir también con las escrituras de caché directas; las escrituras no provocarán una nueva representación si hay una consulta de lectura pendiente. También se puede observar el mismo comportamiento si se procesa por batching una consulta con una mutación.
¿Es este el comportamiento previsto? Y si es así, ¿hay alguna manera de evitarlo?
El useQuery Apollo utiliza una política de recuperación predeterminada de cache-first . Internamente, cuando se actualiza la memoria caché de Apollo, ocurre lo siguiente
Al verificar si se debe notificar una consulta, hay una verificación para ver si la consulta está actualmente en tránsito hacia el servidor y, de ser así, solo se notifica cuando la política de recuperación es cache-only caché o cache-and-network .
Esto está bien y tiene sentido, no desea gastar la CPU en volver a renderizar cuando sabe que los datos están a punto de actualizarse.
Esto provoca un problema en el ejemplo anterior debido a que la consulta de refetch está en curso cuando se aplica la actualización optimista. La verificación shouldNotify devolverá falso. Cambiar la política de búsqueda de consultas soluciona esto
const {data, refetch} = useQuery(GET_TODOS, { fetchPolicy: 'cache-and-network' });