Apollo-link: impor zen-observable memecah kueri di klien apollo saat ditranspilasikan

Dibuat pada 15 Nov 2017  ·  34Komentar  ·  Sumber: apollographql/apollo-link

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

  1. Buka zip dan cd ke dalam proyek uji
  2. yarn install
  3. yarn run start dan buka http://localhost :3000/
  4. Anda akan melihat kesalahan yang ditunjukkan di atas di konsol.

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!

bug

Komentar yang paling membantu

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

Semua 34 komentar

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.

  • Ketika saya menggunakan 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)
  • Ketika saya menggunakan 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.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat