Getting a network error from a refetched query after a mutation lead to an ApolloError and unsubscribe the query, am i missing something?

Question

I'm trying to implement react-apollo with apollo-link-rest, and everything seems wonderful except error handling and refetchQueries.

It seems that if a query goes in error, than got unsubscribe.

I tried to do almost everything: use awaitRefetchQueries, or using apollo-link-error but i always got this in console after the refetchedQuery went in error:

bundle.esm.js:76 Uncaught (in promise) Error: Network error: Response not successful: Received status code 500
    at new ApolloError (bundle.esm.js:76)
    at bundle.esm.js:1556
    at bundle.esm.js:1977
    at Set.forEach (<anonymous>)
    at bundle.esm.js:1975
    at Map.forEach (<anonymous>)
    at QueryManager.broadcastQueries (bundle.esm.js:1973)
    at bundle.esm.js:1451

Than even if the next response is 200 my Component doesn't get updated.

queries an mutation are basics

export const emplacement = gql`
    query emplacement {
        emplacement @rest(type: "Emplacement", path: "/emplacement") {
            id
            data
        }
    }
`

export const completeEmplacement = gql`
    mutation completeEmplacement($body: Data!) {
        completeEmplacement(body: $body)
        @rest(
            type: "Emplacement"
            path: "/emplacement"
            method: "POST"
            bodyKey: "body"
        ) {
            msg
        }
    }
`

And so are my components:

import React from "react";
import "./gql/types";
import { emplacement } from "./gql/queries";
import { completeEmplacement } from "./gql/mutations";
import { Mutation, Query } from "react-apollo";

export const MutationButton = () => {
  return (
    <Mutation mutation={completeEmplacement}>
      {(mutate, { error, data }) => {
        return (
          <>
            <h3> MUTATION VALUE </h3>

            <p> {JSON.stringify(data)}</p>
            <p style={{ color: "red" }}> {JSON.stringify(error)} </p>
            <button
              onClick={() =>
                mutate({
                  variables: { body: { id: "1", nome: "ciao" } },
                  refetchQueries: [{ query: emplacement }],
                  awaitRefetchQueries: true
                })
              }
            >
              complete
            </button>
          </>
        );
      }}
    </Mutation>
  );
};

export const QueryResult = () => {
  return (
    <>
      <Query query={emplacement}>
        {({ data, loading, error }) => {
          if (loading) return "....loading";
          const { emplacement = {} } = data || {};

          return (
            <div>
              <h3> QUERY VALUE </h3>
              <p> {JSON.stringify(emplacement)}</p>

              <p style={{ color: "red" }}>{JSON.stringify(error)}</p>
            </div>
          );
        }}
      </Query>
    </>
  );
};

I expected that my query refresh every time receive a new response from the server even after a mutation.

Instead if a query fails after a mutation, my QueryResult component doesn't get updated even if the next response goes 200.

Getting a network error from a refetched query after a mutation lead to an ApolloError and unsubscribe the query, am i missing something?

0 Answers0