marmelab/react-admin · error · HttpError

${(error?.networkError as ServerError)?.message}

Error message

${(error?.networkError as ServerError)?.message}

What it means

handleError converts ApolloError instances into react-admin HttpErrors. When the error carries a networkError typed as ServerError, its message and statusCode are used; this surfaces network-level failures (non-2xx responses from the GraphQL endpoint) as the thrown error message.

Source

Thrown at packages/ra-data-graphql/src/index.ts:259

                if (!introspectionResultsPromise) {
                    introspectionResultsPromise = resolveIntrospection(
                        client,
                        introspection
                    );
                }

                return introspectionResultsPromise;
            }
        },
        client,
    };

    return raDataProvider;
};

const handleError = (error: ApolloError) => {
    if (error?.networkError as ServerError) {
        throw new HttpError(
            (error?.networkError as ServerError)?.message,
            (error?.networkError as ServerError)?.statusCode
        );
    }

    throw new HttpError(error.message, 200, error);
};

const getQueryOperation = query => {
    if (query && query.definitions && query.definitions.length > 0) {
        return query.definitions[0].operation;
    }

    throw new Error('Unable to determine the query operation');
};

export type GetIntrospection = () => Promise<IntrospectionResult>;
export type GraphqlDataProvider = DataProvider & {

View on GitHub (pinned to 051f511bb0)

Solutions

  1. Inspect the networkError's message/statusCode to identify the underlying HTTP failure.
  2. Fix the server-side error indicated by the status code (500 = server bug, 401 = auth, 404 = wrong URL).
  3. Verify the GraphQL endpoint URL and that the server is reachable (test with curl/Postman).
  4. Check server logs or proxy logs for the actual failure.

Example fix

// before
const client = new ApolloClient({ uri: 'https://api.example.com/gql' }); // 404
// after
const client = new ApolloClient({ uri: 'https://api.example.com/graphql' });
Defensive patterns

Strategy: try-catch

Validate before calling

// Preflight the endpoint before app use:
const res = await fetch(graphqlUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{"query":"{ __typename }"}' });
if (!res.ok) throw new Error(`GraphQL endpoint unhealthy: ${res.status}`);

Type guard

const isServerError = (e: unknown): e is { message: string; statusCode: number } =>
  typeof e === 'object' && e !== null && 'statusCode' in e && typeof (e as any).statusCode === 'number';

Try / catch

try {
  return await dataProvider.getList(resource, params);
} catch (e) {
  if (e instanceof HttpError && e.body instanceof ApolloError && e.body.networkError) {
    const se = e.body.networkError as ServerError;
    console.error(`GraphQL network failure ${se.statusCode}: ${se.message}`);
  }
  throw e;
}

Prevention

When it happens

Trigger: Any Apollo client request that fails at the network/HTTP level — server returning 4xx/5xx, gateway errors, server down — so ApolloError.networkError is a ServerError whose message becomes the thrown HttpError message.

Common situations: GraphQL server returning 500 with an HTML error page; auth middleware returning 401/403; wrong apiUrl; reverse proxy errors; server crashes.

Related errors


AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/49febcac7c65bfa2. Report an issue: GitHub.