Apollo-link-rest: Header: Masalah Kesesuaian Polyfill / Iterable [Edge]

@val-samonte Saya sarankan Anda menggunakan Polyfill seperti ini: https://github.com/jimmywarting/fetch-headers

Terima kasih, akan mencoba ini dan melihat apakah itu menyelesaikan masalah. Akan menutup ini setelahnya.

@fbartho maaf sepertinya masih ada masalah. Setelah menerapkan polyfill yang Anda berikan, saya mendapatkan kesalahan ini:

Setelah menelusuri tumpukan, itu ada dalam kode ini:

Koreksi saya jika saya salah, tetapi seperti yang saya pahami, arus ini seharusnya menjadi turunan dari Header kan? Setelah memeriksa https://developer.mozilla.org/en-US/docs/Web/API/Headers , itu tidak memiliki metode forEach, jadi saya menganggap ini harus berupa array Header?

Menurut halaman yang Anda tautkan, Header seharusnya memiliki metode forEach ? Mungkin tajuk polyfill yang saya tautkan salah?

Melihat unit-test polyfill, mereka memiliki satu yang mengklaim header harus memiliki metode forEach
https://github.com/jimmywarting/fetch-headers/blob/614411d49505db07b350f7afa02290fae2170f56/test/test.js#L107 -L122

Apakah Anda memilih perpustakaan polyfill yang berbeda?

Ya ampun, aku tidak melihatnya di panel samping. Pokoknya ya saya dapat mengonfirmasi bahwa saya menggunakan polyfill yang benar:

Saya membuat proyek saya menggunakan create-react-app dan mengeluarkannya, mengedit file config/polyfill.js dan menambahkan polyfill ini tepat di bawah whatwg-fetch

require('whatwg-fetch');
self.Headers = require('fetch-headers');

Apakah saya salah melakukannya?

Pengalaman saya mengatakan bahwa untuk polyfill, Anda harus memiliki garis seperti:
global.Headers = global.Headers || require('fetch-headers');

Penafian: Saya tidak terlalu familiar dengan create-react-app dan config/polyfill.js . Saya juga bekerja di TypeScript. Jadi kode saya yang sebenarnya (karena Android membutuhkan polyfill) adalah sebagai berikut:

import PolyfillHeaders = require("fetch-headers");
if (global.Headers == null) {
    global.Headers = PolyfillHeaders;
}

Catatan, saya harus memindahkan impor ke blok if sebagai impor dinamis. (salah satu hari ini).

Ahh ya, itu jauh lebih baik, saya akan mencobanya.

Ah ya, sekarang aku ingat. Alasan mengapa saya menetapkannya secara langsung adalah karena Edge mengalami masalah dengan Header yang ada, jadi global.Headers = global.Headers || require('fetch-headers'); tidak berlaku.

Saya juga mencoba ini dan kembali menemui kesalahan yang sama yang saya posting.

Tapi ya, bahkan chrome tidak memiliki Headers.forEach, dan saya juga bertanya-tanya mengapa MDN tidak memilikinya pada tabel kompatibilitas di bawah ini. Bisakah kita memiliki solusi untuk ini untuk sementara?

Saya akan dengan senang hati menerima PR yang menggunakan cara alternatif untuk mengulangi header. Saya pikir spesifikasi mengamanatkan iterable -conformance untuk Header, jadi jika Anda mengganti kode forEach ke Iterable, itu tidak masalah bagi saya. -- Saya pikir orang-orang pada akhirnya perlu melakukan polyfill es2015.iterable sebagai gantinya agar itu berfungsi, jadi… itu masalah.

Saya mengerti! Terima kasih, akan mencoba mengirimkan PR ketika saya tersedia. Saya senang bisa membantu.

Catatan: TypeScript percaya bahwa Headers harus memiliki metode forEach juga.

Saya akan menutup masalah ini karena kami menjawab/menyelesaikan pertanyaan awal @val-samonte -- tetapi jangan ragu untuk mengirimkan PR untuk penggunaan yang dapat diubah alih-alih forEach !

@val-samonte apakah Anda mendapat kesempatan untuk melihat ini?
Jika tidak, saya dapat melihat dan menaikkan PR karena saya juga menghadapi masalah yang sama di IE11.

Sedang berpikir untuk mengganti

current.forEach(function (value, key) {
    accumulator.append(key, value);
});

dengan...

for (var pair of current.entries()) {
    accumulator.append(pair[0], pair[1]);
}

Jika Anda mencari kompatibilitas maksimal, Anda mungkin hanya ingin melakukan: for const key in current Saya tidak yakin bahwa entri() tersedia jauh lebih awal daripada forEach

@val-samonte Ini terjadi karena headers param adalah undefined dalam fungsi normalizeHeaders https://github.com/apollographql/apollo-link-rest/blob/master/src /restLink.ts#L487

Memanggil new Headers dengan undefined sebagai param melempar TypeError ini.

Sampai ini diselesaikan, perbaikan cepat hanya dengan menambahkan beberapa param header ke pembuatan RestLink.
Sebagai contoh:

const authRestLink = new RestLink({
  uri: `${baseUrl}/1.0/auth/`,
  credentials: 'same-origin',
  headers: {
    'Content-Type': 'application/json'
  },
});

@val-samonte Ini terjadi karena headers param adalah undefined dalam fungsi normalizeHeaders https://github.com/apollographql/apollo-link-rest/blob/master/src /restLink.ts#L487

Memanggil new Headers dengan undefined sebagai param melempar TypeError ini.

Sampai ini diselesaikan, perbaikan cepat hanya dengan menambahkan beberapa param header ke pembuatan RestLink.
Sebagai contoh:

const authRestLink = new RestLink({
  uri: `${baseUrl}/1.0/auth/`,
  credentials: 'same-origin',
  headers: {
    'Content-Type': 'application/json'
  },
});

@stefan-djokic Apakah masalah ini sudah teratasi? Saya juga mengalami masalah yang sama, tetapi tidak di browser Edge. Saya menggunakan weixin untuk memasukkan apollo-link-rest, dan tidak ada header di lingkungan, tidak ada header yang ditemukan untuk api permintaan mereka. Bisakah Anda menawarkan bantuan untuk beberapa solusi untuk meretas atau melewati kesalahan yang kami temukan? Sangat menghargai jika Anda dapat menawarkan petunjuk atau bantuan.