Gatsby: بناء التطبيقات باستخدام gatsby.js: ما هي العيوب؟

شكرا لملاحظاتك ،barbush. لم أدرك أن 68 كلمة ستكون أكثر من اللازم.

يقول العنوان في الأساس كل شيء: ما هي العيوب التي تظهر عند إنشاء تطبيق باستخدام gatsby.js؟

أعلم أنه من الممكن إنشاء تطبيق. سؤالي هو - حيث تم تحسين gatsby.js لإنشاء موقع ويب ثابت - ما هي العيوب الموجودة؟ هل هناك أي شيء سوف يعضني في مؤخرتي لاحقًا؟
تبدو خاصة بالنسبة لي.

Woah woah woah barbush أنا حقًا لا أريدك مراقبة مثل هذه الأسئلة. إذا كان سؤالًا مروعًا (وهو ليس كذلك) فمن الأفضل تجاهله ثم إخبار الشخص بذلك. من فضلك لا ترد على مثل هذه الأسئلة مرة أخرى.

bolus لسؤالك. تم تصميم Gatsby ليكون مشابهًا إلى حد ما لإنشاء تطبيق تفاعل وإعدادات webpack / التفاعلية الأخرى. لذلك فهي قادرة تمامًا على استخدامها لبناء تطبيقات الويب. إذا نظرت في دليل الأمثلة ، فهناك مثال على إعادة الإرسال. يقال إن الناس استخدموه مع Apollo بنجاح كبير. لا يمكن استخدام أجهزة الصراف الآلي مع برنامج gatsby نظرًا لأن استخدام الرسم البياني لدينا يتعارض مع استخدامهم ولكنني متأكد تمامًا من أنه سيكون من السهل حلها في المستقبل.

العيب الرئيسي الذي أعرفه هو أنه يفترض أنك تقوم بإنشاء "صفحات" ، لذا إذا كنت تقوم بإنشاء المزيد من تطبيق مباشر بدون صفحات ، فهذا لا يمنحك الكثير وسيحد من حريتك إلى حد ما. في هذه الحالة ، سيكون من الأفضل لك استخدام إعداد المزيد من الفانيليا مثل CRA.

ولكن إذا كنت تقوم بإنشاء "صفحات" ، فإن برنامج Gatsby رائع لأنك تحصل على تقسيم تلقائي للكود و SSR ثابت للتمهيد السريع للتطبيق.

أرغب في كتابة مستند مبادلات أكثر رسمية في وقت ما ، لكنني سعيد بتلقي الأسئلة هنا في هذه الأثناء.

KyleAMathews : شكرًا لك ، هذا بالضبط ما كنت أبحث عنه.

أخطط لإنشاء موقع ويب يعتمد على المحتوى (مدونة وصفحات مبيعات ووثائق وما إلى ذلك) ومن أجل التبسيط ، أود استضافة بعض تطبيقات الصفحة الفردية الصغيرة في نفس المجال.

يبدو أن Gatsby مثالي لهذا.

سيحد أيضًا من حريتك إلى حد ما

ربما لا توجد مشكلة في حالة الاستخدام الخاصة بي ، ولكن هل يمكنك إخباري بالقيود التي يمكنني توقعها ، وما مدى صعوبة التغلب عليها؟

شكرًا على إنشاء Gatsby ، راجع للشغل ، يبدو Gatsby رائعًا حقًا! :)

ولكن هل يمكن أن تخبرني ما هي القيود التي يمكنني توقعها ، وما مدى صعوبة التغلب عليها؟

يحاول Gatsby أن يكون بسيطًا ومتواضعًا قدر الإمكان ، لذا ربما لا يجب أن تواجه قيودًا خاصةً عندما تقوم بعمل مواقع ويب للمحتوى / الصفحات وهو بالضبط ما صمم Gatsby من أجله.

تم تصميم Gatsby لدمج أفكار تطبيقات الويب والمواقع لإنشاء ما يدور في أذهاننا كأداة تطوير وإنتاج مثالية لبناء مواقع سريعة حقًا بأسهل ما يمكن.

ستواجه مشكلة فقط عندما تريد استخدام React بطرق تخرج عن نموذج "الصفحة" - على سبيل المثال المزيد من التطبيقات ذات الشكل الحر. ولكن حتى هناك ، يحتوي Gatsby على فتحة هروب تتيح لك بسهولة تضمين التطبيقات في موقع أكبر https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating -client-only-route

يبدو ممتاز ، شكرا مرة أخرى!

مرحبا KyleAMathews و bolus

التعليق هنا قبل الميلاد للسياق بدلاً من فتح عدد جديد ههههه

ماذا يحدث إذا كنت داخل /app (هذا مسار عميل فقط) ، أريد إنشاء SPA (تسجيل الدخول / تسجيل الخروج / لوحة القيادة) ، أفترض أنني بحاجة إلى إنشاء موجه جديد بداخله ، هل هذا صحيح؟

بماذا تنصح في هذا الاستخدام @ KyleAMathews ، هل هذا ممكن؟ أو سيكون من الأفضل استخدام نهج "المزيد من الفانيليا" كما ذكرت؟

شكرا لك

fernandes checkout https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating -client-only -ways - أخبرنا إذا كان لديك المزيد من الأسئلة!

مرحبًا ، KyleAMathews شكرًا لك على الرد السريع

لقد لعبت مع Gatsby طوال يوم السبت ، وتحققت من هذا المثال وأعده مرة أخرى ... آسف لعدم جعل نفسي شديد السطوع ، كان بإمكاني تقديم المزيد من المعلومات حول هذا

ما أحاول القيام به ، احصل على: https://github.com/fernandes/react-boilerplate وضعه داخل /app كمسار للعميل فقط

يتكون هذا النموذج من:
رد فعل / إعادة (مع إعادة التحميل الساخن) / رد فعل إعادة جهاز التوجيه

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

لا يمكنك وضع غاتسبي داخل شيء مثل رد الفعل النمطي. يريد غاتسبي التعامل مع بناء الموقع وتشغيله. بدلاً من ذلك ، ضع أجزاء "التطبيق" داخل Gatsby.

نعم ، هذا ما قصدته ... يتعامل غاتسبي مع كل موقع الويب الخاص بي وصفحاته ، و react-boilerplate يذهب إلى داخل gatsby تحت /app كطريق للعميل فقط ... هل هذا ممكن كومة ، خاصة رد فعل جهاز التوجيه إعادة)؟

يتعامل Gatsby مع جميع إعدادات webpack / Babel / الأخرى بالفعل ، لذا لا يلزم مشروع bootstrap.

KyleAMathews لقد اكتشفت كيفية الحصول على تطبيق العميل الخاص بي فقط باستخدام عميل redux + apollo يعمل .. شكرًا جزيلاً لك على الردود 😉 👍

KyleAMathews أواجه مشكلة صغيرة هنا ، فأنا أستخدم عميل Graphql apollo داخل صفحات عميلي فقط ، لكنها مخصصة فقط من جانب العميل (بمجرد أن تحتاج إلى تسجيل الدخول) ، لكن Gatsby يحاول إنشاء ملف الفهرس على البناء ما ، بالطبع ، يعطي خطأ

أي اقتراح حول كيفية تخطي إنشاء HTML ؟

تحديث:
أنا أستخدم https://www.gatsbyjs.org/packages/gatsby-plugin-create-client-paths/

لقد أنشأت مكونًا إضافيًا deletePage استنادًا إلى page.path ، إنه يعمل بلا عيب ... لست متأكدًا مما إذا كانت أفضل طريقة ، ولكنه يعمل من أجل حالة الاستخدام الخاصة بي 😄 (نعم ، الآن أحتاج إلى الإنشاء قاعدة إعادة توجيه على nginx لإرسالها دائمًا إلى app/index.html ، لكن هذا بالضبط ما فعلته مع تطبيقي السابق ...

لقد اعتدت أكثر على غاتسبي ، وأحتاج إلى الاعتراف بأنني أسعد في كل تقدم أقوم به ... عمل رائع KyleAMathews !! 👏

KyleAMathews أنا آسف لإزعاجك هنا ولكن يبدو أنه مكان جيد للسؤال عن التوجيه من جانب العميل لأنني لم أتمكن من الالتفاف حوله.

لذلك بالنسبة لحالة الاستخدام الخاصة بي ، أقرأ البيانات من Firebase ولكن هذه البيانات ليست متاحة بالكامل في وقت الإنشاء ، حيث يمكن للمستخدمين تعديلها.

لذلك في صفحة Gatsby (على سبيل المثال: / podcasts) يمكنني الاستعلام بسهولة عن البيانات من firebase في cDM. ولكن بعد ذلك ، أود الانتقال إلى صفحة التفاصيل (على سبيل المثال: / podcast /: id) وهناك حيث أضيع بعض الشيء. هل يجب أن أحاول تفويض هذا المسار إلى التوجيه من جانب العميل؟

كما أفهم ، فإن فكرة فتحة scape /app هي الحصول على مكان يمكنك فيه الحصول على منتجع صحي أسفله ، ولكن يبدو أن الأمر مبالغ فيه لما أحاول القيام به.

شكرًا لك على عملك في غاتسبي ، لقد كانت تجربة رائعة في كل مكان :)

gafemoyano إنشاء مسار مقابل /podcast/:id أمر منطقي تمامًا إذا كان سيكون هناك ملفات podcast أنشأها المستخدمون أثناء عملهم على الأشياء. أحد الجوانب السلبية لذلك هو إبطاء TTFP للأشخاص الذين يزورون صفحات البودكاست مباشرة حيث يوجد الآن خادم HTML مقدم للتحميل لهم. ربما يمكنك عمل هجين أيضًا - تقديم صفحات البودكاست الموجودة في الإنشاء بشكل ثابت ثم إنشاء المزيد أثناء التنقل في المتصفح أثناء قيام الأشخاص بصنعها.

تهم أولئك الموجودين في هذه الصفحة - لقد كتبت صفحة المستندات الجديدة هذه حول إنشاء تطبيقات باستخدام Gatsby https://www.gatsbyjs.org/docs/building-apps-with-gatsby/

مرحبًا KyleAMathews نظرًا لأن هذا أصبح "مشكلة جانب العميل" الرسمية ،

ممكن متعلق بـ https://github.com/gatsbyjs/gatsby/issues/3444

لقد علقت على واجهة برمجة تطبيقات ذاكرة التخزين المؤقت للمفتاح / القيمة للتخزين على https://github.com/gatsbyjs/gatsby/issues/3260#issuecomment -352856214 ، ربما إذا كان لدينا تخطيط + محتوى الصفحة لضمان عدم وجود أي تغييرات (على البيانات و المرئية)

KyleAMathews شكرا لا يجب أن أحاول تحديد مساراتي بشكل ثابت في gatsby-node.js مثل:

` // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/podcasts/:id/)) {
    page.matchPath = "/podcasts/:id";

    // Update the page.
    createPage(page);
  }

بل استخدم فقط ما هو موضح في المثال:

""
// page.matchPath هو مفتاح خاص يستخدم لمطابقة الصفحات
// فقط على العميل.
إذا (page.path.match (/ ^ / app /)) {
page.matchPath = "/ app /: path" ؛

// Update the page.
createPage(page);

}

And on app/index.js I would define my routes by importing from ReactRouter directly:

استيراد {سويتش ، طريق} من "رد-راوتر-دوم"
const AppIndex = () => (

ما الذي سيسمح لي بزيارة / app / podcasts /: id وعرض PodcastDetails حيث يمكن الوصول إلى جزء id من المسار لجلب البيانات في المكون؟

آسف لإزعاجك بمثل هذا السيناريو البسيط ، لم أتمكن من معرفة ذلك من خلال الأمثلة الموجودة. ربما يتعين علينا تضمين مثال للتطبيقات الهجينة إذا كان هذا أمرًا شائعًا إلى حد ما يفعله الناس باستخدام gatsby؟ سأكون على استعداد للمساعدة في ذلك إذا لزم الأمر.

شكرًا مرة أخرى على وقتك في بناء ودعم هذه المكتبة KyleAMathews .

الجزء app من المسار في المثال تعسفي. يمكنك استخدام أي اسم تريده على سبيل المثال podcasts .

مثال على الموقع سيكون رائعًا :-) ونأمل أن يتوفر وقت قريبًا. قم بدعوة أي شخص آخر يتابعك ممن حل هذه المشكلة بالفعل لمشاركة بعض نماذج التعليمات البرمجية!

لقد حاولت ولدي بعض التعليمات البرمجية هنا

لكن لا يزال لدي بعض المشاكل.
واحد وصفته هنا
باختصار ، عندما أقوم بالبناء للإنتاج وأدخل مسارًا ضمن الدليل /app/ ، على سبيل المثال localhost:9000/app/posts/1 وقم بتحديث المتصفح ، أحصل على صفحة فارغة 404.
عندما أقوم بتحديث الصفحة في localhost:9000/app/ فإنها تعمل بشكل جيد.
ربما تكون تهيئة prefixes لـ gatsby-plugin-create-client-paths خاطئة.

module.exports = {
  ...
  plugins     : [
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: {prefixes: [`/app/*`]},
    },
    ...
};

وهناك مشكلة أخرى (لست متأكدًا من أنها مشكلة) لا يمكنني تغليف <Route /> بـ <BrowserRouter> .
عندما أقوم بالبناء للإنتاج (التطوير يعمل بشكل جيد) تلقيت رسالة خطأ تقول "يحتاج سجل المتصفح إلى DOM" ، أعتقد أن السبب في ذلك هو أن Gatsby يعمل في بيئة Node وليس به متصفح وبالتالي لا يحتوي على window إلخ.

أخيرًا قمت بإزالة اللف <BrowserRouter> وهو يعمل بشكل جيد.
أنا جديد على React ، لذا لست متأكدًا من أنها الحل المناسب للمشكلة.

أود الحصول على بعض المساعدة :)

danielemesh مرحبا دانيال. لم يتح لي الوقت للعودة إلى العمل على تطبيق gatsby الخاص بي ، ولكن ما يمكنني رؤيته من شفرة المصدر هو أنك وضعت الدليل /app/* ضمن /pages .
لست متأكدًا من هذا حيث من المفترض أن تذهب ، سأحاول وضعه في الدليل src/ .

اسمحوا لي أن أعرف ما اذا كان يعمل!

في صحتك!

gafemoyano جربها ، ولم تنجح :(
غاتسبي لن يتعرف عليه ..

شكر!

لقد واجهت بعض المكونات الإضافية ، لذلك قررت أن أكتب (استعار 100٪ من المكون الأصلي) ، لذلك يمكنني ، لحسن الحظ ، حل مشكلتي وتعلم كيفية كتابة مكونات gatsby الإضافية

لقد استخرجت من أحد التطبيقات ، آمل أن يساعد في حل مشاكلك ، فقد تمت مواجهة المشكلة قبل الميلاد داخل app به استعلامات Graphql لا ينبغي معالجتها على SSR ، فقط المتصفح

KyleAMathews ماذا تقصد بموقع مثال؟ هل تريد اضافة مكان ما؟ يمكنني العمل على هذا ..

gatsby-config.js

plugins: [
    `app-layout`, // I set my layout
    {
      resolve: `app-client-only`, // I handle app pages
      options: { prefixes: [`/app/*`] },
    },
  ],

plugins / app-layout / gatsby-node.js

// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = ({ page, boundActionCreators }) => {
  const { createPage } = boundActionCreators;

  if (page.path.match(/^\/app/)) {
    // It's assumed that `app.js` exists in the `src/layouts/` directory
    page.layout = "app";
  }

  return true;
};

plugins / app-client-only / gatsby-node.js

// Prefixes should be globs (i.e. of the form "/*" or "/foo/*")
const validatePrefixEntry = prefix => {
  if (!prefix.match(/^\//) || !prefix.match(/\/\*$/)) {
    throw Error(
      `Plugin "gatsby-plugin-client-only-paths" found invalid prefix pattern: ${
        prefix
      }`
    )
  }
}

exports.onCreatePage = ({ page, store, boundActionCreators }, { prefixes }) => {
  const { createPage, deletePage } = boundActionCreators
  const re = {}
  prefixes.forEach(validatePrefixEntry)

  return new Promise(resolve => {
    // Don't set matchPath again if it's already been set.
    if (page.matchPath || page.path.match(/dev-404-page/)) {
      resolve()
    }

    prefixes.some(prefix => {
      if (!re[prefix]) {
        // Remove the * from the prefix and memoize
        const trimmedPrefix = prefix.replace(/\*$/, ``)
        re[prefix] = new RegExp(`^${trimmedPrefix}`)
      }

      // Ensure that the path ends in a trailing slash, since it can be removed.
      const path = page.path.match(/\/$/) ? page.path : `${page.path}/`

      if (path.match(re[prefix])) {
        page.matchPath = prefix.replace(/\*$/, `:path`)
        if (path != '/app/') {
          // <<<<<<<<<<<<<<<<< here is my modification >>>>>>>>>>>>>>>>>>>>>>>
          // do not try to process on SSR, user needs to be logged to
          // consume GraphQL API and render `app` pages correctly
          deletePage(page)
          // <<<<<<<<<<<<<<<<< here is my modification >>>>>>>>>>>>>>>>>>>>>>>
        }
        // createPage(page)
        return true
      }

      return false
    })

    return resolve()
  })
}

لذلك لست متأكدًا مما إذا كانت هذه المشكلة متعلقة بنسبة 100٪ بـ KyleAMathews ، ولكن بغض النظر عما أفعله ، فإن مسار العميل فقط 404s في البداية ، ثم يبدأ في التحميل (ويغادر المستخدمون قبل أن يبدأ التحميل)

الصفحات / التطبيق / index.js:

import CreateSchedule from './components/CreateSchedule'
import ViewSchedule from './components/ViewSchedule'
...
  <ApolloProvider client={client}>
        <Provider store={store}>
          <Switch>
            <Route exact path="/app" component={CreateSchedule} />
            <Route path="/app/:id" component={ViewSchedule} />
          </Switch>
        </Provider>
      </ApolloProvider>

gatsby-node.js

exports.onCreatePage = async ({ page, boundActionCreators }) => {
  const { createPage } = boundActionCreators

  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
    page.matchPath = '/app/:path'

    // Update the page.
    createPage(page)
  }
}

لقد جربت أيضًا المكون الإضافي gatsby-plugin-create-client-paths دون حظ.

يعمل مكون CreateSchedule الخاص بي بشكل جيد بدون 404ing: https://www.appointmentscheduler.org/app

المشكلة في مسار / المكون ViewSchedule: https://www.appointmentscheduler.org/app/1b42d8e8-66b5-4a8d-a0b5-fd4bb13bed09

أوه و 404 يحدث فقط مرة واحدة - خادم dev ليس لديه هذه المشكلة

أيه أفكار؟

rozenmd تحتاج إلى توجيه الخادم لذلك. إذا كنت تستخدم netlify ، فيمكنك تثبيت gatsby-plugin-netlify وسيتم إنشاء تهيئة توجيه الخادم لك تلقائيًا (أرى أن لديك netlify-Identity-widget - لست متأكدًا مما إذا كان هذا يعني أنك تستخدم ذلك لخدمة موقعك)

رائع!
pieh!
يبدو أن كاتب netlify الذي استخدمته (https://github.com/konsumer/gatsby-starter-bootstrap-netlify) لم يكن لديه 'gatsby-plugin-netlify' في gatsby-config.js

أدت إضافة ذلك والنشر إلى إصلاح هذه المشكلة

KyleAMathews هناك مشكلة إضافية محتملة في استخدام Gatsby ، يبدو أنها احتمال 503 (رفض الخدمة) من الخوادم التي تستضيف واجهة برمجة التطبيقات ، نظرًا لطبيعة Gatsby's sucking-up-the-whole-api-at-one مقاربة. أواجه هذا حاليًا مع استضافة GoDaddy ؛ عندما أقوم بتشغيل "gatsby developer" ، يبدو أنه تم الوصول إلى الحد الأقصى للاتصال المتزامن على الفور. هل هذا في الواقع كان يحدث؟ إنه يعمل بشكل رائع محليًا (مفصول Drupal> Gatsby) ، ولكن ليس عند استضافته في GoDaddy. أي نصائح موضع تقدير كبير.

@ cf73 هل حاولت توجيه GoDaddy DNS الخاص بك إلى شيء أكثر ملاءمة لـ Gatsby مثل Netlify؟

rozenmd للتوضيح ، يتم استضافة drupal بدون رأس CMS على GoDaddy ؛ لا يزال موقع Gatsby يعمل محليًا. لذا ما لم أساء فهمك ، لا أرى كيف يمكن لـ Netlify المساعدة؟

@ cf73 https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-drupal/src/gatsby-node.js ربما يمكن استخدام نوع من قائمة الانتظار (نحن نستخدم better-queue في أماكن أخرى) بدلاً من Promise.all لقصر الطلب المتزامن على شيء يسهل إدارته. هل تشعر أنك تستطيع تنفيذه؟

pieh نعم رأيت استخدام قائمة انتظار أفضل ، يبدو وكأنه حل لائق. خائف من أنني لست مستعدًا للقيام بذلك بنفسي - لقد تعثرت هنا في محاولة لحل الخطأ 503 لمشروع عميل كبير أعمل عليه ، والذي أود استخدام Gatsby من أجله. المواعيد النهائية ضيقة ، لذلك إذا لم يكن هناك عمل حول هذا في الساعات القليلة القادمة أو على الأكثر في اليوم التالي أو نحو ذلك ، فسوف يتعين علي البحث عن نهج آخر. هل يمكن لأي شخص أن يقترح ما يمكنني فعله على الفور (بما في ذلك تبديل الاستضافة إذا لزم الأمر) لحل هذا؟ هل هناك سير عمل مثبت دروبال + استضافة + غاتسبي؟

@ cf73 أشعر بك بشأن المواعيد النهائية - إذا كان بإمكانك مشاركة التكوين لموقع دروبال الخاص بك ، لذلك سيكون لدي موقع لاختبار التغييرات (سواء بشكل عام هنا أو بشكل خاص عند الخلاف - https://discordapp.com/invite/0ZcbPKXt5bVoxkfV مع PM إلى أنا - قبضتي هناك grajen3) ، سأرى ما إذا كان بإمكاني القيام بذلك بنفسي اليوم

pieh سيكون ذلك رائعًا ، شكرًا !!

KyleAMathews أواجه مشكلة يائسة أثناء العمل على موقع العميل ، وأنا متأكد من أنه سهل ولكني

يجب أن يكون الاستعلام:

NodeArticle(id: { eq: GUID }) {
  id
  ...otherFields
}

يمكنك أيضًا تصفية allNodeArticle حسب المعرف ولكن إذا كنت تحدد شيئًا واحدًا فقط ، فمن الأفضل الاستعلام عن NodeArticle مباشرة.

KyleAMathews شكرا جزيلا لك! هل يمكنك أن تدلني على أي وثائق حيث يتم تغطية ذلك؟ لم أجد هذا حتى الآن ... هل هو فريد في كيفية تحدث غاتسبي مع دروبال ، أو السلوك المعياري الأساسي لـ GraphQL الذي فاتني للتو؟ قد تكون فكرة للترويج لأي توثيق خاص بالمصدر مثل هذا بشكل أكثر وضوحًا إلى جانب البرنامج المساعد المصدر؟

هذه هي ميزة gatsby الأساسية (تصفية مستوى الاستعلام الجذر المنجز) ، وليست خاصة بـ drupal. لا يمكن للمكونات الإضافية للمصدر تحديد مخطط Graphql - فهذه مهمة يقوم بها gatsby core استنادًا إلى البيانات "الأولية" التي توفرها المكونات الإضافية.