reactjs - query - react mutation

Apollo Optimist UI no funciona en el componente de mutación?

Question

Estoy usando el componente <Mutation /> que tiene la API de Render Prop y trato de hacer una respuesta optimista en la interfaz de usuario.

Hasta ahora tengo esta parte en una función _onSubmit -

createApp({
    variables: { id: uuid(), name, link },
    optimisticResponse: {
        __typename: "Mutation",
        createApp: {
            __typename: "App",
            id: negativeRandom(),
            name,
            link
        }
    }
});

Y mi componente <Mutation /> parece a

<Mutation
    mutation={CREATE_APP}
    update={(cache, { data: { createApp } }) => {
        const data = cache.readQuery({ query: LIST_APPS });
        if (typeof createApp.id == "number") {
            data.listApps.items.push(createApp);
            cache.writeQuery({
                query: LIST_APPS,
                data
            });
        }
    }}
>

{/* 
some code here
*/}

</Mutation>

Sé que la función de update en <Mutation /> ejecuta dos veces, una vez cuando se ejecuta optimisticResponse y por segunda vez cuando la respuesta del servidor regresa.

En la primera vez, les doy la id como un number . Checkout createApp en optimisticResponse where id: negativeRandom()

Es por eso que mi prop de update en el componente <Mutation /> comprueba si createApp.id es un number luego lo empuja en la matriz. Significa que si los datos devueltos desde el local se insertan en el caché local y si se devuelven desde el servidor, no se insertan.

Pero lo que sucede es que los datos solo se muestran cuando se devuelven desde el servidor. La update función se ejecuta dos veces, pero no la inserta en la matriz.

Creo que podría haber 3 problemas -

1. La función de update no se ejecuta cuando se empuja el estado local

2. He intentado hacer que fetchPolicy igual a cache-and-network & cache-first pero no funcionó también.

3. El __typename en __typename optimisticResponse . Idk si Mutation es el valor correcto, así que también probé AppConnection pero aún no funciona.

El código completo se puede encontrar here . Todo el código existe en un archivo por simplicidad. Es una aplicación muy simple que tiene 2 entradas y 1 botón de envío. Parece que -

Nota: Lo mismo funciona con React. Aquí hay un enlace a React Repo - https://github.com/deadcoder0904/react-darkmodelist

Answer 1

Aparentemente esto fue un error en el paquete Apollo o React Apollo. No sé qué error o fue solo para React Native, pero acabo de actualizar mis dependencias y lo resolví sin cambiar ningún código

Puede consultar el código completo en here