Terima kasih telah mengajukan masalah di Apollo Link! Pastikan Anda menyertakan informasi berikut untuk memastikan bahwa masalah Anda dapat ditindaklanjuti. Jika Anda mengajukan permintaan fitur, Anda tidak perlu mengikuti garis besar di bawah ini, tetapi harap sertakan "ide fitur" dalam judul dan sertakan contoh spesifik di mana fitur tersebut akan berguna.
Hai, yang di sana!
Saya sedang bekerja untuk menyiapkan proyek baru dengan Apollo Client, Apollo Link, babel, dan webpack. Saya menggunakan templat proyek yang cukup sederhana untuk mengaturnya dengan saran yang didokumentasikan di Klien Apollo. Ketika saya menjalankannya dan mengirimkannya kueri, saya mendapatkan pengecualian runtime dan kueri tidak dapat melaluinya. Saya menelusuri ini ke bagaimana paket zen-observable
diimpor.
Hasil yang diinginkan:
Klien Apollo dapat membuat kueri menggunakan Tautan Apollo, menggunakan kode berikut:
import { ApolloClient } from "apollo-client"
import { HttpLink } from "apollo-link-http"
import { InMemoryCache } from "apollo-cache-inmemory"
import { gql } from "graphql-tag"
const graphqlClient = new ApolloClient({
link: new HttpLink(),
cache: new InMemoryCache(),
})
graphqlClient.query({ query: gql`query { counter { count } }` })
.then(console.log)
.catch(console.error)
Hasil sebenarnya:
Klien Apollo melempar pengecualian berikut:
TypeError: _super.call is not a function
Stack trace:
ObservableQuery@webpack-internal:///16:56:21
QueryManager</QueryManager.prototype.watchQuery@webpack-internal:///94:404:16
QueryManager</QueryManager.prototype.query/resPromise<@webpack-internal:///94:431:20
QueryManager</QueryManager.prototype.query@webpack-internal:///94:429:26
ApolloClient</ApolloClient.prototype.query@webpack-internal:///93:102:16
@webpack-internal:///59:14:1
[59]<strong i="19">@http</strong>://host/assets/client.js:16:1
__webpack_require__<strong i="20">@http</strong>://host/assets/manifest.js:713:12
fn<strong i="21">@http</strong>://host/assets/manifest.js:118:20
[49]<strong i="22">@http</strong>://host/assets/client.js:7:18
__webpack_require__<strong i="23">@http</strong>://host/assets/manifest.js:713:12
webpackJsonpCallback<strong i="24">@http</strong>://host/assets/manifest.js:26:23
<strong i="25">@http</strong>://host/assets/client.js:1:1
ObservableQuery
mengimpor Observable
dari proyek Apollo Link, yang mengimpornya dari paket zen-observable
. Ketika ditranspilasikan ke JavaScript, paket apollo-link memiliki ini di lib/index.js
:
import * as Observable from 'zen-observable';
export { Observable };
Tampaknya ini menyebabkan beberapa kasus aneh ketika transpiling dan kemudian mensubklasifikasikan Observable ini, tetapi ini tampaknya di mana metode call
berhenti tersedia melalui penyelidikan saya.
Cara mereproduksi masalah:
Terlampir adalah proyek uji yang harus menunjukkan masalah tersebut. Saya berasumsi Node.js v6 atau v8 diinstal dengan Benang. Proyek Uji
yarn install
yarn run start
dan buka http://localhost :3000/Anda dapat mengatasinya dengan mengubah node_modules/apollo-link/lib/index.js:3
dari:
import * as Observable from 'zen-observable';
ke:
import Observable from 'zen-observable';
Masalahnya adalah jika Anda membuat perubahan ini pada file .ts yang sesuai, ini akan menyebabkan kegagalan linting, dan saya tidak yakin bagaimana cara terbaik untuk mengatasinya.
Ada masalah ini di StackOverflow yang menunjukkan bahwa orang lain mengalami masalah ini.
Terima kasih banyak atas waktu Anda, untuk melihat laporan bug saya, dan untuk pekerjaan luar biasa di Apollo!
Saya memiliki masalah yang sama tetapi dengan kesalahan perbedaan.
Kode saya di sini.
import 'isomorphic-fetch'
import { ApolloLink } from 'apollo-link'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
export default new ApolloClient({
link: new HttpLink({ uri: 'http://localhost:5000/api/graphql' }),
cache: new InMemoryCache()
})
Uncaught (in promise) TypeError: _apolloLink.Observable is not a constructor
at HttpLink.eval [as request] (httpLink.js:98)
at eval (link.js:60)
at ApolloLink.eval [as request] (ApolloClient.js:30)
at ApolloLink.eval [as request] (link.js:59)
at execute (link.js:94)
at eval (QueryManager.js:134)
at new Promise (<anonymous>)
at QueryManager.mutate (QueryManager.js:129)
at ApolloClient.mutate (ApolloClient.js:109)
at Header.componentDidMount (index.js:53)
Saya mencoba pekerjaan ini dan saya mendapatkan kesalahan yang sama dengan @stevestreza .
```js
impor 'isomorphic-fetch'
impor * sebagai apolloLink dari 'apollo-link'
import Observable dari 'zen-observable'
apolloLink.Observable = Dapat diamati
````
@stevestreza @mizchi versi apollo-client dan apollo-link apa yang Anda gunakan?
Masalah yang sama di sini, dengan [email protected] dalam proyek webpack, diperbaiki dengan menghapus * as
dalam pernyataan impor, seperti yang ditunjukkan oleh @stevestreza .
Masalah yang sama di sini.
Sama di sini, dan ingin menambahkan masalahnya bukan di dalam Webpack, seperti yang tertulis di SO, tetapi di Apollo dan/atau TypeScript.
Alasan saya tahu adalah saya menggunakan Rollup untuk membuat bundel alih-alih Webpack.
Saya pikir ini adalah bug TypeScript + Rollup tapi saya terkejut itu tidak bermanifestasi dalam build Rollup kami sendiri. Apakah ada orang di sini yang siap membuka permintaan tarik yang membuat perubahan yang disarankan di atas?
Masalah yang sama di sini dengan Rollup. Saya juga tidak menggunakan TypeScript.
Kayaknya TS nya kacau. Saya mencoba membangun modul untuk memperbaiki kesalahan tetapi mendapatkan kesalahan TS.
Halo maafkan saya bertanya tetapi apakah ada yang punya perbaikan terbaru saat ini sedang diselesaikan? tahu apa versi stabil terakhir itu?
dalam penyelidikan saya sejauh ini saya pikir masalah ini hanya terjadi di luar create-react-app. jadi ada beberapa asumsi implisit di dalam create-react-app yang tidak didokumentasikan yang menyebabkan masalah _super.call is not a function
.
Masalah yang sama di sini, saya baru saja mengikuti dokumen pada proyek baru dan mendapatkan kesalahan ini. Saya tidak dapat melanjutkan dengan Apollo.
hanya menautkan masalah saya yang lain di sini: https://github.com/apollographql/apollo-client/issues/2785#issuecomment -354169337 di mana ada perbaikan yang diusulkan (saya belum menguji)
tidak yakin apakah ini terkait tetapi ...
saya menggunakan rollup untuk membuat bundel untuk aplikasi reaksi yang sangat sederhana. semuanya berfungsi dengan baik sampai saya mencoba memasukkan apollo-client ke dalam campuran..
mengikuti dokumentasi di sini: https://www.apollographql.com/docs/react/basics/setup.html#installation
setelah mencoba membangun proyek dengan rollup saya mendapatkan kesalahan berikut selama pembangunan:
of is not exported by node_modules/zen-observable/index.js
47: return new ApolloLink(function (operation, forward) {
48: return (firstLink.request(operation, function (op) {
49: return nextLink.request(op, forward) || Observable.of();
^
50: }) || Observable.of());
51: });
node_modules/apollo-link/lib/link.js
of is not exported by node_modules/zen-observable/index.js
48: return (firstLink.request(operation, function (op) {
49: return nextLink.request(op, forward) || Observable.of();
50: }) || Observable.of());
^
51: });
52: }
node_modules/apollo-link/lib/link.js
of is not exported by node_modules/zen-observable/index.js
74: export { ApolloLink };
75: export function execute(link, operation) {
76: return (link.request(createOperation(operation.context, transformOperation(validateOperation(operation)))) || Observable.of());
^
77: }
saya mencoba mengubah impor di node_modules/apollo-link/lib/link.js
menjadi import Observable from 'zen-observable';
seperti yang disarankan dalam masalah terkait di atas tetapi tampaknya tidak memperbaiki masalah.
Saya menghadapi masalah dengan zen-observable yang sangat berbeda. silahkan lihat
https://github.com/apollographql/apollo-link/issues/389
dan menyarankan jika saya melakukan sesuatu yang salah.
Saya sangat berjuang sehingga saya tidak punya pilihan selain menggunakan peretasan berikut untuk mengatasi masalah ini ...
webpack.config.js
{
test: /node_modules\/apollo-link.*?\/lib\/.*?.js/,
loader: 'string-replace-loader',
options: {
search: 'exports.Observable = Observable',
replace: 'exports.Observable = Observable.default'
}
},
Saya benar-benar berharap saya bisa mendapatkan bantuan di sini sehingga saya dapat menghapus peretasan ini ...
PS Saya tidak menggunakan TypeScript tetapi hanya babel. Tidak yakin apakah ini alasan mengapa itu rusak bagi saya
Saya mendapatkan kesalahan yang sama tanpa TypeScript dan saya dapat menjamin bahwa membuat perubahan
import * as Observable from 'zen-observable';
ke:
import Observable from 'zen-observable';
memperbaiki masalah
sialan @kinyat saya tidak tahu Anda bisa melakukannya dengan webpack. SAMPAI!!! Terima kasih!!!
Masalah yang sama di aplikasi Hello World dasar dengan react-apollo
dan parcel-bundler
. Ada solusi hukum ?
@alapini Saya pikir salah satu solusi "legal" adalah Apollo untuk memberikan pengguna non-typescript (yaitu Babel) versi ES5 dari ts complier.
Saya menggunakan apollo untuk plugin vuex-orm-apollo saya dan mengubah file dalam node_modules
bukanlah pilihan yang layak bagi saya. Perbaikan bug segera akan sangat menyenangkan! :)
dengan versi terbaru dari TypeScript, impor dapat diekspresikan dalam sintaks es modules yang normal, jadi mungkin jika kita semua menunggu Apollo untuk meningkatkan versi TypeScript, ini akan berhasil bagi kita yang bukan pengguna TS.
Saya pikir saya mengalami beberapa masalah yang sama yang tercantum di sini. Pertama kali menggunakan apollo, jadi saya tidak 100% yakin apakah saya menghubungkan semuanya dengan benar. Saya menggunakan rollup tanpa TypeScript dengan inferno.
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
'of' is not exported by 'node_modules/zen-observable/index.js'
'of' is not exported by 'node_modules/zen-observable/index.js'
'of' is not exported by 'node_modules/zen-observable/index.js'
(node:37350) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: 'print' is not exported by node_modules/graphql/language/printer.js
(node:37350) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code
Bagi mereka yang menggunakan parcel.js, PR ini tampaknya memperbaiki masalah sementara: https://github.com/parcel-bundler/parcel/pull/530
Saya belum terlalu mendalami masalah ini, tetapi tampaknya inti masalahnya, seperti yang dicatat oleh @fathyb di sini , adalah:
Perilaku Babel saat ini sepenuhnya benar dan menghormati spesifikasi ES6. Mengimpor ekspor default dengan wildcard adalah ilegal, jadi kesalahan di sini sah.
Namun, orang ( #418 ) dan perpustakaan (antd, @blueprintjs/core, dll.) masih mengandalkan ini. Idenya adalah untuk lebih toleran dengan melonggarkan spesifikasi pada ruang nama yang eksotis.
Jadi sepertinya solusi yang diposting @stevestreza (menghapus * as
) adalah perbaikan yang sah untuk apollo-link, bukan?
Fwiw, saya mendapatkan kesalahan _apolloLink.Observable is not a constructor
, dan itu hilang jika saya menggunakan parcel.js PR yang disebutkan di atas (atau kembali ke parcel.js 1.2.1 seperti yang tercantum dalam apollo-client/issues/2785 )
Saya mengalami masalah ini juga menggunakan Rollup dalam proyek Vuejs.
terima kasih telah berbagi @tadas412
PR di atas diterbitkan di 1.2.0. Beri tahu saya jika masih belum terselesaikan!
masih mendapatkan kesalahan dengan 1.2.0
TypeError: _super.call is not a function
at new ObservableQuery
at QueryManager.watchQuery
at eval
at new Promise
at QueryManager.query
at ApolloClient.query
at VueComponent.created
ini tampaknya juga dilacak di sini apollographql/apollo-client/issues/2785
Bagi saya, ini bekerja dengan 1.2.0.
@littletower Itu mungkin terdengar bodoh, tetapi apakah Anda yakin, Anda menggunakan 1.2.0? Mungkin hapus direktori node_modules dan instal ulang paket? Cuma nanya :)
@phortx ya saya sudah melakukannya :(
Saya mungkin menambahkan bahwa saya menggunakan langganan, tidak tahu apakah itu mengubah apa pun
@littletower Itu aneh. Saya mendapatkan kesalahan yang sama dengan 1.1.0 dan 1.2.0 sepertinya menyelesaikannya. apollo-client
memiliki ketergantungan pada apollo-link
, jadi mungkin ketergantungannya tidak diperbarui. Bisakah Anda membuat repo reproduksi?
Perubahan pasti memperbaiki masalah tingkat kode yang sebenarnya, tetapi sepertinya yarn
menyebabkan konflik.
npm install
untuk menginstal dependensi, itu memuat apollo-link
1.2.0 tanpa perubahan apa pun dari apollo-client
. Ini berfungsi dengan baik dan masalah yang dilaporkan tidak lagi terjadi. (Anda harus menginstal graphql-tag
secara manual dan menghapus kurung kurawal pada impor src/client/index.js
untuk memverifikasi ini)yarn install
, itu menginstal versi apollo-link
1.0.0. Ketika saya yarn add apollo-link
untuk menginstal 1.2.0 secara eksplisit, versi di node_modules/apollo-link
menjadi 1.2.0, tetapi versi lain dari apollo-link
1.0.0 diinstal pada node_modules/apollo-client/node_modules/apollo-link
.Saya melewati pengetahuan saya pada saat ini tentang cara kerja benang untuk memperbaikinya (saya berharap itu telah menginstal apollo-link
1.2.0, bukan 1.0.0). Saya kira perbaikan "benar" adalah dengan meminta apollo-link
1.2.0 dalam package.json untuk apollo-client
. Saya akan memberikan catatan di apollographql/apollo-client#2785.
Bagaimanapun, ini tampaknya sepenuhnya diperbaiki di sini!
@evans Saya membuat repo untuk reproduksi dan
Saya mendapatkan kesalahan yang sama dalam proyek Polymer 3 dan apollo-boost
:
import { HttpLink } from 'apollo-link-http';
penyebab
Uncaught SyntaxError: The requested module '../../zen-observable/index.js'
does not provide an export named 'default'
@heruan Apakah Anda menemukan solusi? Saya menghadapi masalah yang sama.
Komentar yang paling membantu
Saya sangat berjuang sehingga saya tidak punya pilihan selain menggunakan peretasan berikut untuk mengatasi masalah ini ...
webpack.config.js
Saya benar-benar berharap saya bisa mendapatkan bantuan di sini sehingga saya dapat menghapus peretasan ini ...
PS Saya tidak menggunakan TypeScript tetapi hanya babel. Tidak yakin apakah ini alasan mengapa itu rusak bagi saya