Apollo-link-rest: "Header tidak ditentukan" terjadi saat menggunakan apollo-link-rest di program mini weixin

Hai @ Janice1114 , saya tidak terbiasa dengan weixin, tetapi mungkin Anda dapat menggunakan Headers Polyfill?

Seringkali, jika Header tidak tersedia, Pengambilan juga tidak akan tersedia. Jadi polyfill yang mungkin berfungsi untuk keduanya adalah yang ini: https://github.com/bitinn/node-fetch

Hai @fbartho , terima kasih atas balasan cepat Anda. Saya telah mencoba menggunakan polyfill untuk mengaktifkan tajuk pengambilan, tetapi masih mendapatkan kesalahan.

Dan saya menemukan bahwa di bawah weixin, ini menggunakan wx.request untuk pengambilan, yang tidak mendukung variabel terkait jendela, jadi saya khawatir polyfill tidak akan berfungsi.

Dan bolehkah saya tahu apakah akan ada peretasan atau implementasi untuk membantu melewati loop header dalam kode sumber apollo-link-rest? Atau dapatkah Anda memberikan beberapa opsi khusus agar sesuai dengan skenario yang berbeda?

Anda dapat menggunakan parameter customFetch ke ApolloLinkRest untuk menyediakan fungsi pembungkus, fungsi pembungkus ini dapat mengambil header berbasis jendela dari Polyfill, dan meratakannya ke dalam objek tradisional Hash.

• https://www.apollographql.com/docs/link/links/rest/#custom -fetch

Sesuatu seperti berikut (belum teruji, ditulis di browser saya):

function customFetch(url, options) {
   const headers = options.headers.entries().reduce((accumulator, h) => { accumulator[h[0]] = h[1];  return accumulator;}, {})
   return fetch(url, {…options, headers});
}
// Elsewhere: new RestLink({ customFetch, ...

Terima kasih banyak atas tanggapan baik Anda, saya akan mencoba menggunakan polyfill ini dalam pengembangan weixin.

Dan saat saya membaca kode sumber di RestLink.ts, ia akan mencoba mengakses Header, yang tidak tersedia di weixin. Itu bisa menetapkan variabel dalam global .

Jadi saya ingin tahu apakah ada pengaturan khusus atau yang diganti, dapat diterapkan selama proses konstruktor RestLink?

Salam lagi untuk tip Anda yang sangat bagus.

Hai @fbartho , untuk memperbaiki masalah ini di weixin dan browser khusus terkait, saya telah membuat PR seperti di bawah ini:
Perbaikan masalah header

Bisakah Anda membantu dan meninjau apakah kode PR tersedia untuk digabungkan menjadi master？
Terima kasih banyak dan terima kasih banyak jika itu bisa membantu.

Saya memiliki masalah yang sama di "next": "^9.0.3"

Saya juga mengalami masalah ini dengan berikutnya, versi ^8.1.0 . Untuk API grafik saya, saya menggunakan isomorphic-unfetch , versi ^3.0.0 untuk polyfill seperti ini:

import fetch from 'isomorphic-unfetch'
const graphLink = createHttpLink({ uri, fetch })

Tetapi menggunakan paket yang sama untuk melakukan polyfill dengan tautan lainnya tidak berhasil:

const restLink = new RestLink({
  uri,
  customFetch: fetch,
})

Saya juga mencoba node-fetch menggunakan metode customFetch Anda:

import fetch from 'node-fetch'

function customFetch(url, options) {
  const headers = options.headers.entries().reduce((accumulator, h) => {
    accumulator[h[0]] = h[1]
    return accumulator
  }, {})
  return fetch(url, { ...options, headers })
}

const restLink = new RestLink({
  uri: CONTENTFUL_CONTENT_DELIVERY_API,
  customFetch,
})

Dalam kedua kasus saya mendapat ReferenceError: Headers is not defined saat menjalankan berikutnya dalam mode pengembang.

Saya menyukai ide di sini, akan sangat senang jika Anda dapat memberikan beberapa arahan tentang cara menerapkan di lingkungan server. Terima kasih!

Anda dapat mem-polyfill API Headers sambil tetap menggunakan API customFetch Anda sendiri!

Beri tahu saya jika Anda ingin beberapa kode contoh di sana, tetapi saya yakin ini dapat dilakukan tanpa terlalu banyak kerumitan. Saya tidak berada di depan komputer saya untuk saat ini.

@fbartho Beberapa kode contoh akan sangat bagus bila Anda punya kesempatan! Saya mencobanya, tetapi tidak berhasil. Terima kasih!

import * as Polyfillheaders from 'fetch-headers'
import fetch from 'isomorphic-unfetch'

// hook in the Headers polyfill for your environment!
global.Headers = global.Headers || Polyfillheaders;

function customFetch(url, options) {
  const headers = options.headers.entries().reduce((accumulator, h) => {
    accumulator[h[0]] = h[1]
    return accumulator
  }, {})
  return fetch(url, { ...options, headers })
}

const restLink = new RestLink({
  uri: CONTENTFUL_CONTENT_DELIVERY_API,
  customFetch,
})

Sesuatu seperti di atas mungkin melakukan trik @ 2wheelcoder

Terima kasih! Saya akan melaporkan kembali ke sini setelah saya memiliki kesempatan untuk mencobanya.

@bobotoh Hai! Saya menghadapi masalah ini di ios 9.3.5. Saya mencoba mengimpor fetch-headers polyfill tetapi tidak berhasil.
Saya menemukan bahwa instance header dari fetch-headers tidak memiliki metode forEach (lihat di bawah).

Apakah ada solusi lain?

@bobotoh Hai! Saya menghadapi masalah ini di ios 9.3.5. Saya mencoba mengimpor fetch-headers polyfill tetapi tidak berhasil.
Saya menemukan bahwa instance header dari fetch-headers tidak memiliki metode forEach (lihat di bawah).

Apakah ada solusi lain?

Saya memecahkan masalah ini dengan menggunakan fetch polyfill.

Saya akan menutup ini, karena saya yakin kita bisa menyelesaikan ini dengan polyfill di sisi App, dan kita tidak ingin membuat polyfill menjadi ketergantungan dari repositori ini.

Saya belum bisa menyelesaikan ini dengan polyfill. Saya sudah mencoba isomorphic-fetch, isomorphic-unfetch, fetch-headers, dll dan selalu berakhir dengan masalah tentang current.forEach tidak ditentukan atau TypeError: Right-hand side of 'instanceof' is not an object . Ada bantuan?

@VinSpee Pernahkah Anda mencoba fetch polyfill ini.

@ Berasal dari ya, tetapi tidak berfungsi di server.

@VinSpee Mungkin Anda dapat menggunakan ini , tampaknya mereka memiliki metode forEach .

Semoga ini berhasil.

@lintuming terima kasih telah mencoba membantu. Dengan yang itu, saya mendapatkan:

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

tampaknya menjadi jaringan masalah yang kusut 🤣

@VinSpee Maaf, saya tidak tahu mengapa ini terjadi, tetapi menurut saya ini dapat membantu:
https://stackoverflow.com/questions/7042340/error-cant-set-headers-after-they-are-sent-to-the-client

Inilah yang akhirnya berhasil untuk saya:

import clientFetch from 'unfetch';
import serverFetch, { Headers as ServerHeaders } from 'node-fetch';

const client = typeof document !== 'undefined';
global.Headers = client ? global.Headers : ServerHeaders;
const customFetch = client ? clientFetch : serverFetch;

const acmeLink = new JsonApiLink({
  …
  credentials: 'same-origin',
  customFetch,
});

@VinSpee saya menghadapi masalah yang sama dan saya mencoba memperbaiki masalah ini dengan solusi Anda tetapi saya tidak berhasil.
Bisakah Anda membagikan kode kerja Anda

Terima kasih @VinSpee — inilah yang saya butuhkan

Saya dapat memperbaiki masalah ini dengan menggunakan pengambilan kustom

import fetch from "isomorphic-fetch"

const restLink = new RestLink({
  uri: "https://...",
  customFetch: fetch,
  headers: {
    "Content-Type": "application/json",
  },
})

Solusi @VinSpee bekerja untuk saya untuk aplikasi Gatsby JS juga.