私が知っているように、「フェッチに失敗しました」は、応答がない場合（たとえば、サーバーがダウンしている場合）に発生します。 これは、ステータスコードが表示されないためです。 私が間違っている場合は訂正してください。

しかし、そのような状況では、テキストメッセージだけを用意するのは最善の方法ではないと思います。エラーコードなど、より簡単に処理できるものがあるはずです。

クロームインスペクターのネットワークタグでリクエストが送信されているのを確認しました（401）。

これは＃218に関連していると思います（わかりません..）

また、この問題があります。 networkError.statusまたはnetworkError.statusCodeが欠落しており、応答オブジェクトが欠落しています。 ネットワーク層でHTTPステータスコードを処理する方法はありません。

私も現在この問題を抱えています。 最新のリリースで修正されたと思われますが、まだこの問題が発生しています。

この@jbaxleyiiiについて何か考えは

@akriglineと@bogdansoareでまだ問題が発生しているとのことで、ご

現在、＃364に取り組んでいます。 それまでの間、エラーを再現するためにこのコードサンドボを作成または変更できますか？ または、失敗したテストでPRを開く方がよいでしょうか。

連絡あった？

また、この問題があるため、応答オブジェクトは空であり、networkErrorオブジェクトにstatusCodeはありません。

networkErrorプロパティも取得しません：

編集：おそらく＃475

Error型を無視してこの問題を修正しましたが、これは完全に一時的な解決策であり、将来の修正を待つ必要があります。 @evans

これがこの問題です！

私たちがそれらについて書いた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)
})

これに関するニュースはありますか？ 同じ問題。 私のJavaScriptコードで利用できるnetworkError.statusCodeありません。

@goldenbearkin多分それを正しく使用するのは間違っていますか？

エラーでネットワークステータスコードを許可する必要があります。現在、ネットワークステータスにアクセスする方法はありません。 networkErrorは実際にはHttpErrorResponseタイプのオブジェクトであり、 statusプロパティが常に0であり、コンソールの元のステータスコードは401または403です。

@lvlohammadi
たとえば、graphQLErrorsに対しても同じ回避策を実行できますか？ 回避策を使用してnetworkErrorsのステータスコードを確認できます。これを504でテストしました。ただし、認証が失敗すると、graphQLErrorステータスコードは401になると予想されます。ただし、現在はアクセスできません。 'graphQLErrors = {} as any'オプションを試しましたが、役に立ちませんでした。

これは奇妙ですが、私は実際に持っているstatusCodeのプロパティをnetworkError 。 ただし、インターフェイスにはそのようなプロパティがないため、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が未定義ですか？

それはタイプスクリプトエラーですか、それとも本当に未定義ですか？ 再現できますか？

ところで、私のコメントに反対票を投じても、このエラーの解決には役立ちません。この問題を再現する方法はありませんでした。さらに、支援方法を改善するために問題を修正する必要がありました。

同じ問題が発生しますが、サーバーからステータスを送信する方法が原因である可能性があります。 私は基本的に、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ブロックに入ります。 その時までに、エラーはすでに「FailedtoFetch」に設定されています。 ステータスコードはありません。

ここで問題が発生するかどうかを確認する必要があります。

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

かなり忙しいスケジュールのATMを使って、今週末に複製を作成しようと思います。

編集：

主な問題は、これをテストするたびにapollo-serverを使用していることです。これはうまくいきますが、バインディングなどが少し異なる可能性があります。 したがって、複製としてサーバーなしでこれをテストするのは難しいです

それが役立つ場合は、これがApollo-serverです（Apollo-server-expressを使用していることに注意してください）。 CreateGraphQLSchemaは、使用するApolloServerのインスタンスを返します。

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私もこの問題に遭遇しました。 Apolloクライアントではなく、 CORSの問題であることが判明しました。

ネットワークエラーが発生した場合、またはサーバー側でCORSが正しく構成されていない場合、fetch（）promiseはTypeErrorで拒否されます

リクエストを拒否するときは、適切なヘッダーを返していることを確認してください。 私の場合、API Gatewayを使用していて、カスタム承認者がリクエストを拒否していましたが、 Access-Control-Allow-Originヘッダーを添付していません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-risks-of-setting-access-control-allow-origin

だからまだ探している人のために...

statusCode値はnetworkErrorのプロパティとして返され、networkErrorの更新された入力がここに追加されました： https ：

networkErrorはError | ServerError | ServerParseError共用体型になっているため、Typescriptでは、共用体のすべての型に共通するプロパティにのみアクセスできます。 statusCodeはタイプErrorは存在しません。 Typescriptが文句を言わずに、 networkError.statusCode経由でアクセスすることはできません。 タイプを区別するには、タイプガードなどを使用する必要があります。

Typescriptハンドブックではいくつかの方法が提案されています：

私の目的では、 in演算子を使用して動作させました。

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

@JoviDeCroockこの問題は安全に

@mrkrlliありがとう。 まともなソリューション。