Apollo-link: يكسر استيراد zen-note الذي يمكن ملاحظته الاستعلامات في Apollo-client عند نقلها

تم إنشاؤها على ١٥ نوفمبر ٢٠١٧  ·  34تعليقات  ·  مصدر: apollographql/apollo-link

نشكرك على تقديم مشكلة على Apollo Link! يرجى التأكد من تضمين المعلومات التالية للتأكد من أن مشكلتك قابلة للتنفيذ. إذا كنت تقدم طلب ميزة ، فلن تحتاج إلى اتباع المخطط التفصيلي أدناه ، ولكن يرجى تضمين "فكرة الميزة" في العنوان وتضمين مثالًا محددًا تكون فيه هذه الميزة مفيدة.

أهلا!

أعمل على إعداد مشروع جديد باستخدام Apollo Client و Apollo Link و babel و webpack. أستخدم قالب مشروع بسيطًا جدًا لإعداده بالاقتراحات الموثقة في عميل Apollo. عندما أذهب لتشغيله وأرسل إليه استعلامًا ، أحصل على استثناء لوقت التشغيل ولا يمكن تنفيذ الاستعلامات. لقد تتبعت ذلك لمعرفة كيفية استيراد الحزمة zen-observable .

النتيجة المنشودة:

يمكن لـ Apollo Client إجراء استعلام باستخدام Apollo Link ، باستخدام الكود التالي:

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)

النتيجة الفعلية:

يطرح عميل Apollo الاستثناء التالي:

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 Observable من مشروع Apollo Link ، الذي يستورده من الحزمة zen-observable . عند التحويل إلى JavaScript ، فإن حزمة apollo-link تحتوي على هذا عند lib/index.js :

import * as Observable from 'zen-observable';
export { Observable };

يبدو أن هذا يتسبب في بعض الحالات الغريبة عند التحويل والتصنيف الفرعي لاحقًا لهذه الملاحظة ، ولكن يبدو أن هذا هو المكان الذي تتوقف فيه طريقة call عن التوفر من خلال التحقيق الخاص بي.

كيفية إعادة إظهار المشكلة:

مرفق مشروع اختباري يجب أن يوضح المشكلة. أفترض أن Node.js v6 أو v8 مثبت مع Yarn. مشروع تجريبي

  1. قم بفك الضغط والقرص المضغوط في مشروع الاختبار
  2. yarn install
  3. yarn run start وافتح http: // localhost : 3000 /
  4. يجب أن ترى الخطأ الموضح أعلاه في وحدة التحكم.

يمكنك حل هذا عن طريق تغيير node_modules/apollo-link/lib/index.js:3 من:

import * as Observable from 'zen-observable';

إلى:

import Observable from 'zen-observable';

المشكلة هي أنه إذا قمت بإجراء هذا التغيير في ملف .ts المقابل ، فإنه يتسبب في فشل الفحص ، ولست متأكدًا من أفضل السبل لحل ذلك.

توجد هذه المشكلة في StackOverflow مما يشير إلى أن الأشخاص الآخرين يواجهون هذه المشكلة.

شكرًا جزيلاً على وقتك ، ولإلقاء نظرة على تقرير الأخطاء الخاص بي ، وعلى العمل الرائع في Apollo!

bug

التعليق الأكثر فائدة

أنا أكافح بشدة لدرجة أنه ليس لدي خيار سوى استخدام الاختراق التالي للتغلب على هذه المشكلة ...

webpack.config.js

      {
        test: /node_modules\/apollo-link.*?\/lib\/.*?.js/,
        loader: 'string-replace-loader',
        options: {
          search: 'exports.Observable = Observable',
          replace: 'exports.Observable = Observable.default'
        }
      },

أتمنى حقًا أن أحصل على بعض المساعدة هنا حتى أتمكن من إزالة هذا الاختراق ...

ملاحظة: أنا لا أستخدم TypeScript ولكن مجرد بابل. لست متأكدًا مما إذا كان هذا هو سبب كسرها بالنسبة لي

ال 34 كومينتر

لدي نفس المشكلة ولكن مع خطأ الاختلاف.

الكود الخاص بي هنا.

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)

لقد جربت هذا العمل وحصلت على نفس الخطأ مع stevestreza .

شبيبة
استيراد "إحضار متماثل الشكل"
استيراد * كـ apolloLink من "رابط أبولو"
استيراد يمكن ملاحظته من "zen-ملحوظ"
apolloLink.Observable = يمكن ملاحظته
""

stevestrezamizchi ما إصدارات أبولو العميل وأبولو الارتباط الذي تستخدمه؟

نفس المشكلة هنا ، مع [email protected] في مشروع webpack ، تم إصلاحها عن طريق إزالة * as في بيان الاستيراد ، كما أشار stevestreza .

نفس المشكلة هنا.

نفس الشيء هنا ، وأود إضافة المشكلة ليست داخل Webpack ، كما هو مكتوب في SO ، ولكن في Apollo و / أو TypeScript.

السبب الذي أعرفه هو أنني أستخدم Rollup لإنشاء حزمة بدلاً من Webpack.

أعتقد أن هذا خطأ في TypeScript + Rollup ولكنني مندهش من أنه لا يظهر في إصدارات Rollup الخاصة بنا. هل سيكون أي شخص هنا مستعدًا لفتح طلب سحب لإجراء التغيير المقترح أعلاه؟

نفس المشكلة هنا مع التراكمي. أنا لا أستخدم Typescript أيضًا.

يبدو أن TS معطل بالكامل. حاولت بناء الوحدة لإصلاح الأخطاء ولكني كنت أحصل على أخطاء TS.

مرحبًا ، عفواً عن سؤالي ولكن هل لدى أي شخص إصلاح عاجل أثناء حل هذه المشكلة؟ أي فكرة عن آخر نسخة مستقرة؟

في تحقيقاتي حتى الآن ، أعتقد أن هذه المشكلة تحدث فقط خارج تطبيق create-response-app. لذلك ، هناك بعض الافتراضات الضمنية داخل تطبيق create-response- التي لم يتم توثيقها والتي تسببت في حدوث مشكلة _super.call is not a function .

نفس المشكلة هنا ، لقد تابعت للتو المستند في مشروع جديد تمامًا وتلقيت هذا الخطأ. أنا غير قادر على الاستمرار مع أبولو.

فقط اربط مشكلتي الأخرى هنا: https://github.com/apollographql/apollo-client/issues/2785#issuecomment -354169337 حيث يوجد إصلاح مقترح (لم أختبر)

لست متأكدًا مما إذا كان هذا مرتبطًا ولكن ...

أستخدم التراكمي لإنشاء حزمة لتطبيق تفاعل بسيط للغاية. كل شيء يسير على ما يرام حتى أحاول إدخال عميل أبولو في المزيج ..

باتباع الوثائق هنا: https://www.apollographql.com/docs/react/basics/setup.html#installation

بعد محاولة إنشاء المشروع باستخدام مجموعة التحديثات ، تلقيت الخطأ التالي أثناء الإنشاء:

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: }

حاول ive تغيير الاستيراد في node_modules/apollo-link/lib/link.js إلى import Observable from 'zen-observable'; كما هو مقترح في المشكلة ذات الصلة أعلاه ولكن لا يبدو أنه يحل المشكلة.

أواجه مشكلة مع zen-Observable وهي مختلفة تمامًا. الرجاء إلقاء نظرة على
https://github.com/apollographql/apollo-link/issues/389
واقترح ما إذا كنت أفعل شيئًا خاطئًا.

أنا أكافح بشدة لدرجة أنه ليس لدي خيار سوى استخدام الاختراق التالي للتغلب على هذه المشكلة ...

webpack.config.js

      {
        test: /node_modules\/apollo-link.*?\/lib\/.*?.js/,
        loader: 'string-replace-loader',
        options: {
          search: 'exports.Observable = Observable',
          replace: 'exports.Observable = Observable.default'
        }
      },

أتمنى حقًا أن أحصل على بعض المساعدة هنا حتى أتمكن من إزالة هذا الاختراق ...

ملاحظة: أنا لا أستخدم TypeScript ولكن مجرد بابل. لست متأكدًا مما إذا كان هذا هو سبب كسرها بالنسبة لي

أحصل على نفس الخطأ بدون الكتابة المطبوعة ويمكنني أن أؤكد أن إجراء التغيير

import * as Observable from 'zen-observable';
إلى:
import Observable from 'zen-observable';

يصلح المشكلة

لعنة kinyat لم يكن لدي أي فكرة أنه يمكنك فعل ذلك باستخدام webpack. سمسم !!! اشكرك!!!

نفس المشكلة في تطبيق Hello World الأساسي باستخدام react-apollo و parcel-bundler . أي حل قانوني ؟

alapini أعتقد أن أحد الحلول "القانونية" هو أن توفر Apollo للمستخدم غير المطبوع على الحروف (مثل Babel) إصدار ES5 من مترجم ts.

أنا أستخدم Apollo للمكوِّن الإضافي vuex-orm-apollo وتغيير الملفات داخل node_modules ليس خيارًا قابلاً للتطبيق بالنسبة لي. سيكون إصلاح الخلل قريبًا رائعًا حقًا! :)

مع أحدث إصدار من الكتابة المطبوعة ، يمكن التعبير عن الواردات في بناء جملة وحدات es العادية ، لذلك ربما إذا انتظرنا جميعًا حتى يقوم Apollo بترقية الإصدار المطبوع عليه ، فسيعمل هذا خارج الصندوق بالنسبة لنا غير مستخدمي TS.

أعتقد أنني أواجه بعض المشكلات نفسها المدرجة هنا. أول مرة أستخدم فيها Apollo ، لذلك لست متأكدًا بنسبة 100٪ إذا كنت أقوم بتوصيل الأشياء بشكل صحيح. أنا أستخدم تراكمي بدون نسخة مطبوعة مع الجحيم.

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

بالنسبة لأولئك الذين يستخدمون parcel.js ، يبدو أن هذه العلاقات العامة تعمل على حل المشكلة: https://github.com/parcel-bundler/parcel/pull/530

لم أتعمق كثيرًا في هذه المشكلة ، لكن يبدو أن جوهر المشكلة ، كما يلاحظ fathyb هنا ، هو:

سلوك Babel الحالي صحيح تمامًا ويحترم مواصفات ES6. يعد استيراد تصدير افتراضي باستخدام حرف بدل غير قانوني ، لذا فإن الأخطاء هنا شرعية.

ومع ذلك ، لا يزال الأشخاص ( # 418 ) والمكتبات (antd ، @ blueprintjs / core ، إلخ ..) يعتمدون على هذا. الفكرة هي أن تكون أكثر تسامحًا من خلال تخفيف المواصفات على مساحات الأسماء الغريبة.

لذلك يبدو أن الحل البديل stevestreza المنشور (إزالة * as ) هو إصلاح شرعي لـ apollo-link ، أليس كذلك؟

Fwiw ، كنت أتلقى الخطأ _apolloLink.Observable is not a constructor ، وسيختفي إذا استخدمت parcel.js PR المشار إليه أعلاه (أو عدت إلى parcel.js 1.2.1 كما هو مذكور في apollo-client / issues / 2785 )

أواجه هذه المشكلة أيضًا باستخدام Rollup في مشروع Vuejs.

شكرا للمشاركة @ tadas412

تم نشر العلاقات العامة أعلاه في 1.2.0. اسمحوا لي أن أعرف إذا لم يتم حلها بعد!

لا يزال هناك خطأ مع 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

يبدو أن هذا يتم تتبعه هنا apollographql / apollo-client / issues / 2785 أيضًا

بالنسبة لي ، إنه يعمل مع 1.2.0.

littletower قد يبدو هذا غبيًا ، لكن هل أنت متأكد من أنك تستخدم 1.2.0؟ ربما حذف node_modules dir وإعادة تثبيت الحزم؟ فقط أتسائل :)

phortx نعم فعلت ذلك بالفعل :(
قد أضيف أنني أستخدم الاشتراكات ، لا أعرف ما إذا كان ذلك يغير شيئًا

littletower هذا غريب. كنت أتلقى نفس الخطأ مع 1.1.0 و 1.2.0 على ما يبدو لحلها. يعتمد apollo-client على apollo-link ، لذلك ربما لم يتم تحديث التبعية. هل يمكنك إنشاء إعادة استنساخ؟

أدى التغيير بالتأكيد إلى إصلاح المشكلة الفعلية على مستوى الكود ، ولكن يبدو أن yarn يتسبب في حدوث تعارض.

  • عندما أستخدم npm install لتثبيت التبعيات ، يتم تحميل apollo-link 1.2.0 بدون أي تغيير من apollo-client . يعمل هذا بشكل رائع ولم تعد المشكلة التي تم الإبلاغ عنها تحدث. (يجب عليك تثبيت graphql-tag يدويًا وإزالة الأقواس في الاستيراد في src/client/index.js للتحقق من ذلك)
  • عندما أستخدم yarn install ، يتم تثبيت الإصدار apollo-link 1.0.0. عندما أقوم yarn add apollo-link لتثبيت 1.2.0 بشكل صريح ، يصبح الإصدار الموجود في node_modules/apollo-link 1.2.0 ، ولكن يتم تثبيت إصدار آخر من apollo-link 1.0.0 بسعر node_modules/apollo-client/node_modules/apollo-link .

لقد تجاوزت معرفتي في هذه المرحلة حول كيفية عمل الغزل لإصلاح هذا (أتوقع أن يكون قد تم تثبيت apollo-link 1.2.0 ، وليس 1.0.0). أعتقد أن الإصلاح "الصحيح" هو طلب apollo-link 1.2.0 في package.json مقابل apollo-client . سأقوم بإسقاط ملاحظة في apollographql / apollo-client # 2785.

في كلتا الحالتين ، يبدو أن هذا ثابت تمامًا هنا!

evans لقد أنشأت الريبو للتكاثر

أتلقى نفس الخطأ في مشروع Polymer 3 و apollo-boost :

import { HttpLink } from 'apollo-link-http';

الأسباب

Uncaught SyntaxError: The requested module '../../zen-observable/index.js'
                      does not provide an export named 'default'

heruan هل وجدت أي حل؟ أواجه نفس المشكلة.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات