Gatsby: Membangun aplikasi dengan gatsby.js: Apa kekurangannya?

Terima kasih atas tanggapan Anda, @barbush. Saya tidak menyadari bahwa 68 kata akan terlalu banyak.

Judul pada dasarnya mengatakan semua: Kekurangan apa yang ada saat saya membuat aplikasi dengan gatsby.js?

Saya tahu itu mungkin untuk membangun sebuah aplikasi. Pertanyaan saya adalah - karena gatsby.js dioptimalkan untuk pembuatan situs web statis - apa kekurangannya? Apakah ada sesuatu yang akan menggigit saya nanti?
Sepertinya cukup spesifik untuk saya.

Woah woah woah @barbush Saya benar -

@bolus untuk pertanyaan Anda. Gatsby dirancang agar cukup mirip untuk membuat aplikasi react dan pengaturan webpack / react lainnya. Jadi ini sangat mampu digunakan untuk membangun aplikasi web. Jika Anda melihat di direktori contoh, ada contoh redux. Orang-orang telah menggunakannya dengan Apollo dilaporkan cukup berhasil. Relai atm tidak mungkin digunakan dengan gatsby karena penggunaan graphql kami bertentangan dengan mereka, tetapi saya cukup yakin ini akan mudah untuk dikerjakan di masa mendatang.

Kelemahan utama yang saya tahu adalah ia menganggap Anda sedang membangun "halaman" jadi jika Anda membangun lebih banyak aplikasi langsung tanpa halaman maka itu tidak memberi Anda banyak dan juga akan membatasi kebebasan Anda. Dalam hal ini Anda akan lebih baik menggunakan lebih banyak pengaturan vanilla seperti CRA.

Tetapi jika Anda membuat "halaman", gatsby sangat bagus karena Anda mendapatkan pemisahan kode otomatis dan SSR statis untuk boot aplikasi yang cepat.

Saya ingin menulis dokumen pengorbanan yang lebih formal di beberapa titik, tetapi saya senang untuk menjawab pertanyaan di sini untuk sementara.

@KAMAMews : Terima kasih, itulah yang saya cari.

Saya berencana membuat situs web berbasis konten (blog, halaman penjualan, dokumentasi, dll.) Dan untuk kesederhanaan, saya ingin menghosting beberapa aplikasi satu halaman kecil di domain yang sama.

Sepertinya Gatsby ideal untuk ini.

juga akan membatasi kebebasan Anda

Mungkin tidak ada masalah untuk kasus penggunaan saya, tetapi dapatkah Anda memberi tahu saya batasan apa yang dapat saya perkirakan, dan seberapa sulit untuk mengatasinya?

Terima kasih telah membuat Gatsby, btw., Gatsby terlihat sangat keren! :)

tetapi dapatkah Anda memberi tahu saya batasan apa yang dapat saya harapkan, dan seberapa sulit untuk mengatasinya?

Gatsby mencoba untuk menjadi sesederhana dan sesederhana mungkin sehingga Anda mungkin tidak akan mengalami batasan terutama saat Anda melakukan konten / halaman situs web yang memang dirancang untuk Gatsby.

Gatsby dirancang untuk memadukan aplikasi web dan ide situs untuk menciptakan apa yang ada di benak kita alat pengembangan & produksi yang ideal untuk membangun situs yang sangat cepat semudah mungkin.

Anda hanya akan mendapat masalah jika ingin menggunakan React dengan cara yang keluar dari model "halaman" - misalnya aplikasi dengan format yang lebih bebas. Tetapi bahkan di sana, Gatsby memiliki pintu keluar yang memungkinkan Anda dengan mudah menyematkan aplikasi dalam situs yang lebih besar https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating -client-only-routes

Kedengarannya sempurna, sekali lagi terima kasih!

hai @CAMM dan @bolus

berkomentar di sini bc dari konteksnya alih-alih membuka terbitan baru heheh

apa yang terjadi jika di dalam /app (itu adalah rute khusus klien), saya ingin membuat SPA (login / logout / dashboard), saya kira saya perlu membuat router baru di dalamnya, apakah itu benar?

Apa yang Anda rekomendasikan dalam kasus penggunaan @KAMBerita ini , apakah mungkin? atau akan lebih baik menggunakan _lebih pendekatan vanilla_ seperti yang Anda nyatakan?

Terima kasih

@fernandes checkout https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating -client-only-routes - beri tahu kami jika Anda memiliki pertanyaan lainnya!

hai, @KAMAMews terima kasih atas balasan cepatnya

Saya bermain dengan Gatsby sepanjang hari Sabtu, memeriksa contoh ini dan redux satu ... Maaf karena tidak membuat diri saya begitu cerdas, saya dapat memberikan informasi lebih lanjut tentang itu

Apa yang saya coba lakukan, dapatkan: https://github.com/fernandes/react-boilerplate saya dan taruh di dalam /app sebagai jalur khusus klien

boilerplate ini disusun oleh:
react / redux (dengan hot reloading) / react router redux

Saya tidak begitu berpengalaman dengan JS; mungkin hanya detail yang aku lewatkan .. terima kasih lagi!

Anda tidak dapat memasukkan Gatsby ke dalam sesuatu seperti react-boilerplate. Gatsby ingin menangani proses membangun dan menjalankan situs. Sebagai gantinya, letakkan bagian "aplikasi" di dalam Gatsby.

ya, itulah yang saya maksud ... gatsby menangani semua situs web saya dan halamannya, dan react-boilerplate masuk ke dalam gatsby di bawah /app sebagai rute khusus-klien ... apakah itu mungkin (mengingat tumpukannya, khususnya react-router-redux)?

Gatsby sudah menangani semua webpack / Babel / konfigurasi lain sehingga proyek bootstrap tidak diperlukan.

@KyleAMathews Saya mencari cara agar aplikasi khusus klien saya dengan redux + apollo client berfungsi .. terima kasih banyak atas balasannya 😉 👍

@KyleAMathews Saya menghadapi masalah kecil di sini, saya menggunakan klien graphql apollo di dalam halaman khusus klien saya, tetapi mereka hanya untuk sisi klien (setelah Anda perlu masuk), tetapi Gatsby mencoba membuat file indeks sedang membangun; apa, tentu saja, memberikan kesalahan

ada saran tentang cara melewati kreasi HTML ?

memperbarui:
Saya menggunakan https://www.gatsbyjs.org/packages/gatsby-plugin-create-client-paths/

Saya membuat plugin yang deletePage berdasarkan page.path , itu bekerja dengan sempurna ... tidak yakin apakah itu cara terbaik, tetapi berfungsi untuk kasus penggunaan saya 😄 (ya, sekarang saya perlu membuat aturan pengalihan pada nginx untuk selalu mengirim ke app/index.html , tetapi itulah yang saya lakukan dengan aplikasi saya sebelumnya ...

Saya semakin terbiasa dengan gatsby, dan perlu mengakui bahwa saya lebih bahagia setiap kemajuan yang saya lakukan ... kerja luar biasa @KyleAMathews !! 👏

@KyleAMews Maaf mengganggu Anda di sini, tetapi tampaknya ini adalah tempat yang baik untuk bertanya tentang perutean sisi klien karena saya belum bisa memahami hal itu.

Jadi untuk kasus penggunaan saya, saya membaca data dari firebase tetapi data ini tidak SEMUA tersedia pada waktu pembuatan, karena pengguna dapat memodifikasinya.

Jadi di Halaman Gatsby (ex: / podcasts) saya dapat dengan mudah meminta data dari firebase di cDM. Tapi kemudian saya ingin pergi ke halaman detail (mis: / podcast /: id) dan di sana saya sedikit tersesat. Haruskah saya mencoba mendelegasikan rute tersebut ke perutean sisi klien?

Seperti yang saya mengerti, ide untuk palka scape /app adalah memiliki tempat di mana Anda bisa memiliki SPA di bawah sana, tetapi sepertinya berlebihan untuk apa yang saya coba lakukan.

Terima kasih atas pekerjaan Anda di gatsby, ini merupakan pengalaman yang luar biasa :)

@gafemoyano membuat rute untuk /podcast/:id benar-benar masuk akal jika akan ada podcast yang dibuat oleh pengguna saat mereka mengerjakan sesuatu. Satu kelemahannya adalah itu memperlambat TTFP bagi orang-orang yang mengunjungi halaman podcast secara langsung karena sekarang ada server yang merender HTML untuk dimuat untuk mereka. Anda mungkin bisa melakukan hybrid juga - secara statis merender halaman podcast yang ada saat build dan kemudian membuat lebih banyak dengan cepat di browser saat orang membuatnya.

Menarik bagi mereka yang ada di halaman ini - Saya menulis halaman dokumen baru ini tentang membangun aplikasi dengan Gatsby https://www.gatsbyjs.org/docs/building-apps-with-gatsby/

hai @KyleAMathews karena ini telah menjadi "masalah sisi klien" resmi hahah hal lain yang telah saya pertimbangkan tentang masalah podcast ini, mengingat kami memiliki kendali pada kedua frontend dan backend podcast, apakah ada cara untuk memicu pembangunan kembali halaman tertentu saja ? atau cukup cache build dan ubah apa yang telah dimodifikasi. Saya tidak yakin bagaimana ini bisa berhasil

mungkin terkait dengan https://github.com/gatsbyjs/gatsby/issues/3444

Anda berkomentar tentang kunci / nilai cache api untuk disimpan di https://github.com/gatsbyjs/gatsby/issues/3260#issuecomment -352856214, mungkin jika kita memiliki tata letak + konten halaman untuk memastikan tidak ada perubahan (pada data dan visual)

@Kamnews Terima kasih atas balasan Anda! Jadi biarkan saya melihat apakah saya mengerti dengan benar. Pendekatannya adalah dengan mendelegasikan jalur ke kode klien untuk dirender, bukan? Jadi saya tidak boleh mencoba menentukan rute saya secara statis di gatsby-node.js seperti:

` // 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);
  }

Tapi cukup gunakan apa yang ditunjukkan pada contoh:

``
// page.matchPath adalah kunci khusus yang digunakan untuk mencocokkan halaman
// hanya pada klien.
if (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:

impor {Switch, Route} dari 'react-router-dom'
const AppIndex = () => (

Mana yang memungkinkan saya mengunjungi / app / podcasts /: id dan merender PodcastDetails di mana dapat mengakses bagian: id dari jalur untuk mengambil data dalam komponen?

Maaf telah mengganggu Anda dengan skenario sederhana seperti itu, saya hanya tidak dapat mengetahuinya dengan contoh yang ada. Mungkin kita harus menyertakan contoh untuk aplikasi hybrid jika itu adalah hal yang cukup umum dilakukan orang dengan gatsby? Saya bersedia membantu jika diperlukan.

Sekali lagi terima kasih atas waktu Anda membangun dan mendukung perpustakaan ini, @KAMAMnews .

Bagian app dari path pada contoh adalah arbitrer. Anda dapat menggunakan nama apa pun yang Anda butuhkan misalnya podcasts .

Situs contoh akan sangat bagus :-) semoga akan punya waktu segera. Undang siapa pun yang mengikuti siapa yang telah memecahkan masalah ini untuk membagikan beberapa kode contoh!

Saya sudah mencoba dan memiliki beberapa contoh kode di sini

Tapi saya masih punya beberapa masalah.
Yang saya jelaskan di sini
Singkatnya, ketika saya membangun untuk produksi dan masuk ke rute di bawah direktori /app/ , misalnya localhost:9000/app/posts/1 dan menyegarkan browser, saya mendapatkan halaman kosong 404.
Ketika saya menyegarkan halaman di localhost:9000/app/ itu berfungsi dengan baik.
Mungkin konfigurasi prefixes untuk gatsby-plugin-create-client-paths salah.

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

Dan masalah lainnya adalah (tidak yakin itu masalah) Saya tidak bisa membungkus <Route /> dengan <BrowserRouter> .
Ketika saya membangun untuk produksi (pengembangan berfungsi dengan baik) saya mendapatkan pesan kesalahan yang mengatakan "riwayat browser membutuhkan DOM", saya percaya itu karena Gatsby berjalan di lingkungan Node dan tidak memiliki browser sehingga tidak memiliki window dll.

Akhirnya saya menghapus bungkus <BrowserRouter> dan itu berfungsi dengan baik.
Saya baru mengenal React jadi saya tidak yakin ini adalah solusi yang tepat untuk masalah tersebut.

Akan sangat senang mendapatkan bantuan :)

@danielindonesia Hai Daniel. Saya belum punya waktu untuk kembali mengerjakan aplikasi gatsby saya, tetapi yang dapat saya lihat dari kode sumber Anda adalah Anda telah menempatkan direktori /app/* dalam /pages .
Saya tidak yakin ini harus kemana, saya akan mencoba meletakkannya di direktori src/ .

Beri tahu saya jika berhasil!

Bersulang!

@gafemoyano mencobanya, tidak berhasil :(
Gatsby tidak akan mengenalinya ..

Terima kasih!

Saya telah menghadapi beberapa plugin jadi memutuskan untuk menulis milik saya (100% dipinjam dari yang asli), jadi saya bisa, untungnya, memecahkan masalah saya dan belajar bagaimana menulis plugin gatsby

Saya mengekstrak dari aplikasi, semoga membantu menyelesaikan masalah Anda, masalah yang dihadapi bc di dalam app memiliki kueri graphql yang tidak boleh ditangani di SSR, hanya browser

@KAMews apa yang Anda maksud dengan situs contoh? ingin menambahkan suatu tempat? Saya bisa mengerjakan ini ..

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()
  })
}

Jadi saya tidak yakin apakah masalah ini 100% terkait @KyleAMathews , tetapi apa pun yang saya lakukan, pada awalnya jalur khusus klien saya 404, lalu mulai dimuat (dan pengguna pergi sebelum mulai memuat)

halaman / app / 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)
  }
}

Saya juga mencoba plugin gatsby-plugin-create-client-paths tanpa hasil.

Komponen CreateSchedule saya berfungsi dengan baik tanpa 404: https://www.appointmentscheduler.org/app

Masalah ada di ViewSchedule Route / komponen: https://www.appointmentscheduler.org/app/1b42d8e8-66b5-4a8d-a0b5-fd4bb13bed09

Oh dan 404 hanya terjadi setelah dibangun - server dev tidak memiliki masalah ini

Ada ide?

@ frozenmd Anda memerlukan perutean server untuk itu. Jika Anda menggunakan netlify Anda dapat menginstal gatsby-plugin-netlify dan itu akan menghasilkan konfigurasi perutean server untuk Anda secara otomatis (Saya melihat Anda memiliki widget-identitas-netlify - tidak yakin apakah itu berarti Anda menggunakannya untuk melayani situs Anda)

Hebat!
Terima kasih @pieh!
Sepertinya starter netlify yang saya gunakan (https://github.com/konsumer/gatsby-starter-bootstrap-netlify) tidak memiliki 'gatsby-plugin-netlify' di gatsby-config.js

Menambahkan itu dan menerapkan telah memperbaiki masalah ini 😄

@KyleAMathews satu masalah tambahan yang berpotensi menggunakan Gatsby tampaknya adalah kemungkinan tanggapan 503 (penolakan layanan) dari server tempat API dihosting, karena sifat dari Gatsby yang menyedot-up-the-whole-api-at-once pendekatan. Saat ini saya mengalami ini dengan hosting GoDaddy; ketika saya menjalankan 'gatsby develop', tampaknya batas koneksi serentak maksimum langsung tercapai. Apakah ini sebenarnya yang sedang terjadi? Ini berfungsi dengan baik secara lokal (memisahkan Drupal> Gatsby), tetapi tidak saat dihosting di GoDaddy. Setiap tips sangat dihargai.

@ cf73 sudahkah Anda mencoba mengarahkan DNS GoDaddy Anda ke sesuatu yang lebih cocok untuk Gatsby seperti Netlify?

@ frozenmd untuk mengklarifikasi, CMS headless drupal dihosting di GoDaddy; situs Gatsby masih berjalan secara lokal. jadi kecuali saya salah paham, saya tidak mengerti bagaimana Netlify bisa membantu?

@ cf73 https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-drupal/src/gatsby-node.js mungkin dapat menggunakan semacam antrian (kami menggunakan better-queue di tempat lain) daripada Promise.all untuk membatasi permintaan serentak ke sesuatu yang lebih bisa diatur. Apakah Anda merasa bisa menerapkannya?

@ pieh ya saya melihat penggunaan antrian yang lebih baik, kedengarannya seperti solusi yang layak. takut saya tidak sanggup melakukannya sendiri - saya tersandung di sini mencoba menyelesaikan kesalahan 503 untuk proyek klien besar yang saya kerjakan, yang mana saya ingin sekali menggunakan Gatsby. tenggat waktu ketat, jadi jika tidak ada solusi untuk ini dalam beberapa jam ke depan atau paling lambat hari berikutnya atau lebih, saya harus mencari pendekatan lain. Adakah yang bisa menyarankan apa yang bisa saya lakukan secara instan (termasuk beralih hosting jika perlu) untuk menyelesaikan masalah ini? apakah ada alur kerja drupal + hosting + Gatsby yang terbukti?

@ cf73 Saya rasa Anda tentang tenggat waktu - jika Anda dapat membagikan konfigurasi untuk situs drupal Anda, jadi saya akan memiliki situs untuk menguji perubahannya (baik secara publik di sini atau secara pribadi dalam perselisihan - https://discordapp.com/invite/0ZcbPKXt5bVoxkfV dengan PM ke saya - pegangan saya ada grajen3), saya akan melihat apakah saya bisa melakukannya sendiri hari ini

@pieh itu akan luar biasa, terima kasih !!

@KyleAMews Saya menghadapi masalah putus asa saat bekerja di situs klien, yang saya yakin mudah tetapi saya melewatkan sesuatu. Stack adalah Drupal JSON-API ke graphiql Gatsby. Itu tidak memungkinkan saya untuk memberikan argumen ke node (lihat terlampir). Sejauh yang saya tahu, ini karena skema Drupal Gatsby belum sepenuhnya sempurna? Atau apakah saya melewatkan satu langkah? Setiap bantuan segera dan BANYAK dihargai !!

Kueri harus:

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

Anda juga dapat memfilter allNodeArticle menurut id tetapi jika Anda hanya memilih satu hal, lebih bersih untuk menanyakan NodeArticle secara langsung.

@KAMews terima kasih banyak! Dapatkah Anda menunjukkan kepada saya dokumentasi apa pun yang membahasnya? Saya belum menemukan sejauh ini ... apakah unik tentang cara Gatsby berbicara dengan Drupal, atau perilaku standar inti GraphQL yang baru saja saya lewatkan? Mungkinkah ide untuk mempromosikan dokumentasi khusus sumber seperti ini lebih jelas di samping plugin sumber?

Ini adalah fitur inti gatsby (pemfilteran tingkat permintaan root dilakukan), bukan spesifik drupal. Plugin sumber tidak dapat menentukan skema graphql - ini adalah tugas yang dilakukan oleh inti gatsby berdasarkan data "mentah" yang disediakan oleh plugin.