Аполлон извлекается при нажатии клавиши Escape

Question

Я использую apollo-client@2.3.5 (но эта проблема также возникает в последней версии и может не иметь прямого отношения к самому клиенту Apollo).

Я использую несколько запросов для загрузки различных частей моего приложения.Моя проблема в том, что нажатие клавиши Escape отменяет запросы на выборку и разрушает все приложение.Я уже пробовал:

• захват Escape события нажатия клавиш и вызов preventDefault(), stopPropagation(), return false
• удаление поля signal из параметров запроса на выборку
• переопределение выборки в Apollo Client для использования axios (но это невозможно, поскольку axios не совместимо с Fetch API)

Но все равно запросы отменяются при нажатии клавиши Escape.

Есть ли способ или способ предотвратить отмену запросов на получение?Или, может быть, есть какой-нибудь клиент, совместимый с Fetch API, который не отменяет запросы при нажатии клавиши Escape?

Answer 1

Для любого, кто сталкивался с той же или подобной проблемой, мне удалось обойти ее следующим образом:

1. Я создал следующую функцию:

   export const makeRequest = (url, requestParams) => {
       requestParams.data = requestParams.body;
   
       return axios(url, requestParams)
           .then(response => {
               return new Response(JSON.stringify(response.data), {
                   ...response.headers,
                   status: response.status,
                   statusText: response.statusText
               })
           });
   };
   

2. Я заменил выборку по умолчанию в Apollo Link в Apollo Client, используя свойство fetch:

   new HttpLink({
       uri: config.graphqlUrl,
       credentials: 'same-origin',
       fetch: makeRequest
   })
   

makeRequest, имитирующее функцию fetch, но не отменено сEscape нажатие клавиши.

Клиент Apollo ожидает, что ответом будет экземпляр Response , поэтому мы предоставляем его один.

EDIT: Оказалось, что это не такработать на IE11.Если вы заботитесь о совместимости с IE, вам следует установить whatwg-fetch (https://www.npmjs.com/package/whatwg-fetch)) и в верхней части файла указать следующее:

import { Response } from "whatwg-fetch";