내가 아는 바와 같이 "failed to fetch"는 응답이 없으면(예: 서버가 다운된 경우) 발생합니다. 상태 코드가 표시되지 않기 때문입니다. 내가 틀렸다면 저를 수정하십시오.

그러나 그런 상황에서 문자 메시지만 갖는 것은 최선의 아이디어가 아니라고 생각합니다. 오류 코드와 같이 더 쉽게 처리할 수 있는 무언가가 있어야 합니다.

나는 요청이 크롬 인스펙터의 네트워크 태그에서 (401)로 보내고 있는 것을 보았습니다.

#218과 관련이 있는 것 같아요(확실하지 않음..)

또한이 문제가 있습니다. networkError.status 또는 networkError.statusCode 이(가) 없고 응답 개체가 없습니다. 네트워크 계층에서 HTTP 상태 코드를 처리할 방법이 없습니다.

나는 또한 현재이 문제가 있습니다. 최신 릴리스에서 수정된 것으로 추정되지만 여전히 이 문제가 있습니다.

@jbaxleyiii 에 대한 생각이

@akrigline 과 @bogdansoare 가 여전히 문제를 겪고 있다는 소식을 들으니 유감입니다! 이것은 확실히 고쳐져야 합니다.

나는 지금 #364를 통해 일하고 있다. 그동안 이 코드 샌드보스 를 생성하거나 수정하여 오류를 재현할 수 있습니까? 아니면 실패한 테스트로 PR을 여는 것이 더 낫습니까?

어떤 소식?

또한 이 문제가 발생하면 응답 객체가 비어 있고 networkError 객체에 statusCode가 없습니다.

networkError 속성도 얻지 못합니다.

편집: 아마도 #475

Error 유형을 무시하여 이 문제를 해결했지만 이것은 완전히 임시적인 해결 방법이며 향후 수정 사항을 기다려야 합니다. @에반스

여기 이 문제가 있습니다!

우리가 그들에 대해 쓴 networkError 의 현재는 실제 서버 측 오류가 아닙니다. 요약하면 이러한 경우에는 statusCode 가 전혀 발생하지 않으며 실제로 graphql 서버에서 실제 네트워크 오류를 생성하거나 수신해야 합니다. (_서버와의 통신 문제만 있는 경우 statusCode _에 접근할 수 없습니다.)

서체 오류가 아직 남아 있습니다!

TypeScript를 사용하는 경우 networkError 에 다음과 같은 유형이 있음을 알 수 있습니다.

export interface ErrorResponse {
  graphQLErrors?: GraphQLError[];
  networkError?: Error;
  response?: ExecutionResult;
  operation: Operation;
}

그리고 Error 는 다음과 같이 정의됩니다.

interface Error {
    name: string;
    message: string;
    stack?: string;
}

여기서 statusCode 가 정의되어 있지 않음을 알 수 있으므로 TypeScript에서 networkError.statusCode 와 같은 것을 호출할 수 없습니다.

나의 임시 해결책

networkError 를 any 로 캐스트해야 하며 또한 이를 빈 object 로 만들어야 합니다.

const afterWareLink = onError(({operation, response, graphQLErrors = {}, networkError = {} as any}) => {
    const status: number = networkError && networkError.statusCode ? networkError.statusCode : null;
    debugHelper.error('apolloError', {
        operation,
        response,
        graphQLErrors,
        networkError,
        status,
    });

    // Do your job
    // if (status && HTTPExceptions[status])
    //     redirectService.redirectWithReload(`/error/${status}`);
});

위의 afterWareLink 코드에 따르면 400 상태 코드와 함께 서버 오류가 발생했으며 이제 이 상태 코드에 액세스할 수 있습니다.

다음은 내 ApolloClient 정의입니다.

import {ApolloLink, from} from 'apollo-link';
import {application} from '../../constants/application';
import {ApolloClient} from 'apollo-client';
import {InMemoryCache} from 'apollo-cache-inmemory';
import {HttpLink} from 'apollo-link-http';
import {tokenStorage} from '../middleware';
import {debugHelper} from '../helpers/debugHelper';
import {onError} from 'apollo-link-error';
import {apolloCache} from './apolloCache';
import fetch from 'unfetch';

const API = new HttpLink({
    uri: application.API.URL,
    fetch: fetch
});

const cache = new InMemoryCache({
    dataIdFromObject: (object: any) => apolloCache.getID(object)
});

const afterWareLink = onError(({operation, response, graphQLErrors = {}, networkError = {} as any}) => {
    const status: number = networkError && networkError.statusCode ? networkError.statusCode : null;
    debugHelper.error('apolloError', {
        operation,
        response,
        graphQLErrors,
        networkError,
        status,
    });

    // Do your job
    // if (status && HTTPExceptions[status])
    //     redirectService.redirectWithReload(`/error/${status}`);
});

const middleWareLink = new ApolloLink((operation, forward) => {
    const token = tokenStorage.get();
    operation.setContext(context => ({
        ...context,
        headers: {
            ...context.headers,
            token: token ? token.token : '',
        },
    }));

    return forward(operation);
});

export const apolloClient = new ApolloClient({
    link: from([
        middleWareLink,
        afterWareLink,
        API
    ]),
    cache: cache,
});

유용하기를 바랍니다.

노드 서버를 사용 중이고 컨텍스트에서 응답 개체에 액세스할 수 있는 경우 다음을 추가하여 이 문제를 해결할 수 있습니다. ctx.res.status(401); 응답을 반환하기 전에.
이제 apollo-link-errors 및 apollo-link-retry 둘 다 networkErrors 개체에서 오류를 선택할 수 있습니다.

다음은 사용자가 인증되었는지 확인하기 위해 사용자 지정 스키마 지시문을 사용하는 예입니다.

import { SchemaDirectiveVisitor } from "graphql-tools";
import { defaultFieldResolver } from "graphql";
import { createError } from "apollo-errors";

const AuthError = createError("AuthError", {
  message: "Not authorized"
});

export class IsAuthenticatedDirective extends SchemaDirectiveVisitor {
  visitObject(type) {
    this.ensureFieldsWrapped(type);
  }
  visitFieldDefinition(field, details) {
    this.ensureFieldsWrapped(details.objectType);
  }

  ensureFieldsWrapped(objectType) {
    if (objectType._authFieldsWrapped) return;
    objectType._authFieldsWrapped = true;

    const fields = objectType.getFields();
    Object.keys(fields).forEach(fieldName => {
      const field = fields[fieldName];
      const { resolve = defaultFieldResolver } = field;
      field.resolve = async function(...args) {
        const ctx = args[2];
        const result = await resolve.apply(this, args);
        if (ctx.req.user) {
          return result;
        } else {
          ctx.res.status(401);
          return null;
        }
      };
    });
  }
}

고쳐졌나 안됐어? 나는 여전히 networkError 개체의 상태 코드에 액세스할 수 없습니다.

@artsiompeshko
TypeScript에서 다음과 같이 액세스할 수 있습니다.

const networkErrorLink = onError(({networkError, operation, forward}: ErrorResponse) => {
  if (networkError) {
    switch (networkError['statusCode']) {
      case 401:
      case 422:
        if (window.location.pathname !== '/login') {
          Logger.error('Unauthorized or stale Authorization Session. Reloading page...')
          window.history.go()
        }
        break
    }
  }
  return forward(operation)
})

이것에 대한 소식이 있습니까? 같은 문제. 내 자바스크립트 코드에서 사용할 수 있는 networkError.statusCode 없습니다.

@goldenbearkin 어쩌면 우리가 올바르게 사용하는 것이 잘못 되었습니까?

오류에서 네트워크 상태 코드를 허용해야 합니다. 현재 네트워크 상태에 액세스할 수 있는 방법이 없습니다. networkError 는 실제로 status 속성이 있는 HttpErrorResponse 유형 개체이며 항상 0 여기서 콘솔의 원래 상태 코드는 401 또는 403입니다.

@lvlohammadi
graphQLErrors에 대해서도 동일한 해결 방법을 수행할 수 있습니까? 해결 방법을 사용하여 networkErrors에 대한 상태 코드를 볼 수 있습니다. 이를 504로 테스트했습니다. 그러나 인증에 실패하면 graphQLError 상태 코드 401이 예상됩니다. 하지만 현재 액세스할 방법이 없습니다. 'graphQLErrors = {} as any' 옵션을 시도했지만 아무 소용이 없었습니다.

이것은 이상하지만 실제로 networkError 에 statusCode 속성이 있습니다. 그러나 인터페이스에는 이러한 속성이 없으므로 TS는 여기에 오류를 출력합니다.

const errorLink = onError(({ networkError, graphQLErrors, response }: ErrorResponse) => {
  if (graphQLErrors) {
    graphQLErrors.map(({ message, locations, path }: GraphQLError) => {
      showError(message);
    });
  }

  // @ts-ignore
  console.log('statusCode', networkError.statusCode); // outputs 401

  if (networkError) {
    showError(networkError.message);
  }
});

서버에서 koa 및 koa-passport 를 사용하고 해당 코드는 다음과 같습니다.

app.use(mount(graphQlPath, passport.authenticate('jwt', { session: false })));

이 문제는 실제로 오래되었으므로 닫습니다. 그러나 여전히 이에 대해 우려하는 경우 언제든지 다시 열어서 최대한 빨리 연락드리겠습니다.

@JoviDeCroock 은 지금 그 문제에 직면해 있습니다... 그래서, 해결책은 무엇입니까? networkError에서 오류 상태를 얻으려면 어떻게 해야 합니까?

좋습니다. 그래서 그것이 networkError(graphqlError가 없습니까?)이고 statusCode/status가 정의되지 않은 것이 확실합니까?

typescript 오류입니까 아니면 실제로 정의되지 않은 것입니까? 재현할 수 있습니까?

Btw 내 의견을 반대하는 것은 이 오류를 해결하는 데 도움이 되지 않습니다. 이 문제를 재현할 방법이 없었고 우리가 도울 수 있는 방법을 개선하기 위해 다듬어야 하는 문제가 없었습니다.

동일한 문제가 있지만 서버에서 상태를 보내는 방법 때문일 수 있습니다. 저는 기본적으로 graphQL 특정 처리를 바로 가기 위해 노력하고 있으며 예를 들어 다음과 같이 간단히 응답합니다.
res.status(404).send("The resource you are looking for cannot be found")

그러나 나는 TypeError: Failed To Fetch 만 얻습니다. Apollo-Server-Express의 구현 세부 정보 때문입니까?

@JoviDeCroock 사실, 401 또는 403에 대한 클라이언트 측 오류 처리를 구현하려고 할 때 graphql 코드로 약간 엉망이되었습니다. 우리는 미들웨어를 사용하고 내가 한 것은 모든 요청에 ​​대해 항상 401을 반환하는 것입니다. 그렇게 하면 OPTION 요청에도 401이 발생했는데, 발생해서는 안 되는 일이며 아마도 그 때문에 상태를 전혀 볼 수 없었을 것입니다. 코드를 업데이트한 후 상태 코드를 볼 수 있습니다.

@dimitriy-k 업데이트에 감사드립니다. 이 문제가 해결되었다는 소식을 들으니 기쁘게 생각합니다.

@AlbertoPL의 경우 오늘 밤 귀하의 문제를 조사하겠습니다. 가능하면 이에 대해 더 많은 의견을 보내주십시오.

@JoviDeCroock 봐 주셔서 감사합니다. 따라서 작동시키려는 특정 코드는 다음과 같습니다.
res.status(426).send()

Chrome의 네트워크 탭에서 /graphql 엔드포인트가 426 상태 코드와 적절한 응답(업그레이드 필요)으로 응답하는 것을 봅니다. 그러나 apollo-link-error 에서 onError 링크를 사용할 때 여전히 TypeError: Failed to Fetch 만 표시됩니다. 진정한 상태 코드를 얻을 수 있다면 훌륭할 것입니다(또는 메시지로도 충분할 것입니다).

알겠습니다. 아주 좋은 정보입니다. 우리는 이것을 어떻게든 디버깅할 수 있어야 합니다.

네, 확실히 시도할 수 있습니다. 도움/팁을 주시면 감사하겠습니다.

따라서 Chrome의 디버거에서 코드를 단계별로 실행하면 apollo-link-batch-http 및 apollo-link-http 모두 가져오기 기능을 사용하여 API 호출을 수행하는 것을 볼 수 있습니다(링크 옵션으로 전달되거나 일부 기본값으로 전달됨, 둘 다 시도함).

fetcher(chosenURI, options)
    .then(function (response) {
        operations.forEach(function (operation) { return operation.setContext({ response: response }); });
        return response;
    }).then(parseAndCheckHttpResponse(operations))

then 블록으로 이동하지 않고 catch 블록으로 이동합니다. 그때까지 오류는 이미 "Failed to Fetch"로 설정되어 있습니다. 상태 코드가 없습니다.

여기서 문제가 발생하는지 확인해야 합니다.

https://github.com/apollographql/apollo-link/blob/master/packages/apollo-link-http-common/src/index.ts#L118

직장에서 꽤 바쁜 일정으로 이번 주말에 재현해 보려고 합니다.

편집하다:

주요 문제는 내가 이것을 테스트할 때마다 apollo-server 하고 있고 잘 진행되지만 바인딩이나 무언가가 약간 다를 수 있다는 것입니다. 그래서 재생산 서버 없이는 테스트하기 어렵습니다.

도움이 된다면 여기 Apollo 서버가 있습니다(Apollo-server-express를 사용하고 있습니다). CreateGraphQLSchema는 우리가 사용하는 Apollo Server의 인스턴스를 반환합니다:

const { ApolloServer, gql } = require("apollo-server-express");

const collectFragments = container => {
  return container
    .$list()
    .map(component => container[component])
    .join("\n");
};

const mergeObjects = container => {
  const types = container.$list().map(k => container[k]);
  return _.merge(...types);
};

function CreateGraphQLSchema(
  schema,
  queries,
  mutations,
  subscriptions,
  resolvers,
  graphqlFormatError,
) {
  const graphQlSchema = gql`
    ${collectFragments(schema.enum)}

    ${collectFragments(schema.type)}

    type Query {
      ${schema.Query}
    }

    ${collectFragments(schema.input)}

    type Mutation {
      ${schema.Mutation}
    }

    type Subscription {
      ${schema.Subscription}
    }

    schema {
      query: Query
      mutation: Mutation
      subscription: Subscription
    }
  `;

  const resolverMap = {};
  resolverMap.Query = mergeObjects(queries);
  resolverMap.Mutation = mergeObjects(mutations);
  resolverMap.Subscription = mergeObjects(subscriptions);
  resolvers.$list().forEach(type => (resolverMap[type] = resolvers[type]));

  return new ApolloServer({
    typeDefs: graphQlSchema,
    resolvers: resolverMap,
    context: ({ req, res }) => {
      return { req, res, user: req.user };
    },
    formatError: graphqlFormatError,
    playground: process.env.NODE_ENV !== "production",
  });
}

@AlbertoPL 나도이 문제에 CORS 문제로 밝혀졌습니다.

네트워크 오류가 발생하거나 CORS가 서버 측에서 잘못 구성되면 fetch() 약속이 TypeError와 함께 거부됩니다.

요청을 거부할 때 적절한 헤더를 반환하는지 확인하십시오. 제 경우에는 API Gateway를 사용하고 있었고 사용자 지정 권한 부여자가 요청을 거부했지만 Access-Control-Allow-Origin 헤더를 첨부하지 않았습니다. 저는 서버리스를 사용하여 배포를 관리하지만 이것이 사용되는 경우 CloudFormation 템플릿으로 변환할 수 있습니다: https://serverless.com/blog/cors-api-gateway-survival-guide/#cors -with-custom-authorizers.

@chris-feist를 잘 찾았습니다!
응답에 Access-Control-Allow-Origin 헤더를 추가하면 apollo-client에서 상태 코드를 사용할 수 있습니다.

express.js에서 다음을 수행했습니다.

res.set('Access-Control-Allow-Origin', '*').status(401).send()

Access-Control-Allow-Origin을 사용하면 잠재적인 보안 위험이 발생하지 않습니까? https://stackoverflow.com/questions/12001269/what-are-the-security-risk-of-setting-access-control-allow-origin

그래서 아직도 찾고 있는 누군가를 위해...

statusCode 값은 networkError의 속성으로 반환되고 networkError에 대한 업데이트된 유형이 여기에 추가되었습니다. https://github.com/apollographql/apollo-link/pull/530

networkError 는 이제 Error | ServerError | ServerParseError 의 공용체 유형이므로 Typescript는 공용체의 모든 유형에 공통적인 속성에만 액세스할 수 있도록 허용합니다. statusCode 는 Error 유형에 존재하지 않습니다. Typescript가 불평하지 않고는 networkError.statusCode 를 통해 액세스할 수 없습니다. 유형을 구별하기 위해 유형 가드 또는 다른 것을 사용해야 합니다.

Typescript 핸드북에는 다음과 같은 몇 가지 방법이 제안되어 있습니다. https://www.typescriptlang.org/docs/handbook/advanced-types.html#type -guards-and-differentiating-types

내 목적을 위해 in 연산자를 사용하여 작업을 수행했습니다.

  onError: ({ networkError }: ErrorResponse) => {
    if (
      networkError &&
      'statusCode' in networkError &&
      networkError.statusCode === 401
    ) {
      // perform logout stuff
    }
  },

@JoviDeCroock 이 문제를 닫아도 안전하다고 생각하십니까?

@mrkrlli 감사합니다. 괜찮은 솔루션.