Gatsby: Создание приложений с помощью gatsby.js: каковы недостатки?

Спасибо за отзыв, @barbush. Я не понимал, что 68 слов - это слишком много.

Заголовок говорит обо всем: какие недостатки возникают при создании приложения с помощью gatsby.js?

Я знаю, что можно создать приложение. У меня вопрос - поскольку gatsby.js оптимизирован для создания статических веб-сайтов, какие есть недостатки? Есть ли что-нибудь, что может потом укусить меня за задницу?
Мне кажется, это довольно специфично.

Уоу, уоу, уоу @barbush Я действительно не хочу, чтобы ты задавал такие вопросы. Если это ужасный вопрос (а это не так), то лучше проигнорировать его, чем отговорить человека. Пожалуйста, не отвечайте на подобные вопросы снова.

@bolus на ваш вопрос. Gatsby спроектирован так, чтобы быть похожим на создание приложения для реагирования и других настроек веб-пакетов / реагирования. Так что его вполне можно использовать для создания веб-приложений. Если вы посмотрите в каталог примеров, там есть пример сокращения. Сообщается, что люди довольно успешно использовали его с Apollo. Relay невозможно использовать с gatsby, поскольку наше использование graphql конфликтует с их, но я уверен, что в будущем это будет легко обойти.

Главный недостаток, о котором я знаю, заключается в том, что он предполагает, что вы создаете «страницы», поэтому, если вы создаете более простое приложение без страниц, это не даст вам многого, а также несколько ограничит вашу свободу. В этом случае вам лучше использовать более ванильную настройку, например CRA.

Но если вы создаете «страницы», Gatsby отлично подходит, так как вы получаете автоматическое разделение кода и статический SSR для быстрой загрузки приложения.

Я хотел бы в какой-то момент написать более официальный документ о компромиссах, но пока я рад ответить на вопросы здесь.

@KyleAMathews : Спасибо, это именно то, что я искал.

Я планирую создать веб-сайт, управляемый контентом (блог, страницы продаж, документация и т. Д.), И для простоты я хотел бы разместить несколько небольших одностраничных приложений в том же домене.

Похоже, Гэтсби идеально подходит для этого.

также несколько ограничит вашу свободу

Вероятно, это не проблема для моего варианта использования, но можете ли вы сказать мне, какие ограничения я могу ожидать и насколько сложно будет их обойти?

Спасибо за создание Гэтсби, кстати, Гэтсби выглядит действительно потрясающе! :)

но можете ли вы сказать мне, какие ограничения я могу ожидать и насколько сложно будет их обойти?

Гэтсби старается быть как можно более простым и непритязательным, поэтому вам, вероятно, не следует сталкиваться с ограничениями, особенно когда вы делаете веб-сайты с контентом / страницами, для чего и предназначен Gatsby.

Gatsby спроектирован так, чтобы объединить идеи веб-приложений и сайтов, чтобы создать то, что мы думаем, идеальный инструмент разработки и производства для максимально простого создания действительно быстрых сайтов.

Вы столкнетесь с проблемами только тогда, когда захотите использовать React способами, выходящими за рамки «страничной» модели - например, больше приложений произвольной формы. Но даже там у Гэтсби есть аварийный люк, который позволяет легко встраивать приложения на более крупный сайт https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating -client-only-routes

Звучит идеально, еще раз спасибо!

привет @KyleAMathews и @bolus

комментируя здесь bc контекста вместо открытия нового выпуска, хе-хе

что произойдет, если внутри моего /app (это маршрут только для клиента) я хочу создать SPA (вход / выход / панель инструментов), я полагаю, мне нужно создать внутри него новый маршрутизатор, это правильно?

Что вы порекомендуете в этом случае @KyleAMathews , возможно ли это? или было бы лучше использовать более ванильный подход, как вы сказали?

благодарю вас

@fernandes checkout https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating -client-only-routes - дайте нам знать, если у вас возникнут дополнительные вопросы!

привет, @KyleAMathews, спасибо за быстрый ответ

Я всю субботу играл с Гэтсби, проверил этот пример и еще один ... Извините, что не показываю себя таким умным, я мог бы дать больше информации об этом

То, что я пытаюсь сделать, возьмите мой: https://github.com/fernandes/react-boilerplate и поместите его в /app в качестве пути только для клиента

этот шаблон состоит из:
React / Redux (с горячей перезагрузкой) / React Router Redux

Я не очень разбираюсь в JS; может это просто деталь, которую мне не хватает ... еще раз спасибо!

Вы не можете поместить Гэтсби внутрь чего-то вроде реактивного шаблона. Гэтсби хочет заняться сборкой и запуском сайта. Вместо этого поместите части «приложения» внутрь Гэтсби.

да, это то, что я имел в виду ... gatsby обрабатывает весь мой веб-сайт и его страницы, а react-boilerplate входит в gatsby под /app как клиентский маршрут ... возможно ли это (учитывая свой стек, особенно react-router-redux)?

Gatsby уже обрабатывает всю конфигурацию webpack / Babel / другой конфигурации, поэтому проект начальной загрузки не нужен.

@KyleAMathews Я

@KyleAMathews У меня здесь небольшая проблема, я использую клиент graphql apollo внутри своих клиентских страниц, но они предназначены только для клиентской стороны (как только вам нужно войти в систему), но Гэтсби пытается сгенерировать индексный файл на сборке; что конечно дает ошибку

есть предложения о том, как пропустить это создание HTML ?

Обновить:
Я использую https://www.gatsbyjs.org/packages/gatsby-plugin-create-client-paths/

Я создал плагин, который deletePage основан на page.path , он работает безупречно ... не уверен, что это лучший способ, но работает для моего варианта использования 😄 (да, теперь мне нужно создать правило перенаправления на nginx, чтобы всегда отправлять на мой app/index.html , но это именно то, что я сделал со своим предыдущим приложением ...

Я все больше и больше привыкаю к ​​Гэтсби, и должен признаться, я рад каждому прогрессу, который я делаю ... отличная работа

@KyleAMathews Мне очень жаль, что я беспокою вас, но похоже, что это хорошее место, чтобы спросить о маршрутизации на стороне клиента, так как я не мог осмыслить это.

Итак, для моего варианта использования я читаю данные из firebase, но эти данные не ВСЕ доступны во время сборки, поскольку пользователи могут их изменять.

Итак, на странице Gatsby (например, / podcasts) я могу легко запросить данные из firebase в cDM. Но затем я хотел бы перейти на страницу с подробностями (например: / podcast /: id), и там я немного заблудился. Следует ли мне попытаться делегировать этот маршрут маршрутизации на стороне клиента?

Насколько я понимаю, идея люка /app scape заключается в том, чтобы иметь место, где вы можете просто разместить там SPA, но это кажется излишним для того, что я пытаюсь сделать.

Спасибо за вашу работу в Гэтсби, это был отличный опыт :)

@gafemoyano, создание маршрута для /podcast/:id имеет смысл, если пользователи будут создавать подкасты, когда они работают над чем-то. Одним из недостатков этого является замедление TTFP для людей, посещающих страницы подкастов напрямую, поскольку теперь для них загружается HTML-код, отрендеренный сервером. Возможно, вы также могли бы сделать гибрид - статически отображать страницы подкастов, которые существуют при сборке, а затем создавать новые на лету в браузере по мере их создания людьми.

Интересно для тех, кто на этой странице - я написал эту новую страницу документации о создании приложений с помощью Gatsby https://www.gatsbyjs.org/docs/building-apps-with-gatsby/

Привет, @KyleAMathews, так как это стало официальной «проблемой на стороне клиента», ха-ха, еще одна вещь, которую я рассматривал в связи с этой проблемой подкаста, учитывая, что у нас есть контроль над интерфейсом и серверной частью подкастов, есть ли способ вызвать перестройку только определенной страницы ? или просто кешируйте сборку и измените только то, что было изменено. Я не уверен, как это могло работать

возможно связано с https://github.com/gatsbyjs/gatsby/issues/3444

вы прокомментировали api кэша ключей / значений для хранения на 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 - это специальный ключ, который используется для сопоставления страниц
// только на клиенте.
if (page.path.match (/ ^ / app /)) {
page.matchPath = "/ приложение /: путь";

// Update the page.
createPage(page);

}

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

import {Switch, Route} из 'response-router-dom'
const AppIndex = () => (

Что позволило бы мне посетить / app / podcasts /: id и отобразить PodcastDetails, где можно было бы получить доступ к части: id пути для извлечения данных в компоненте?

Извините, что побеспокоил вас таким простым сценарием, я просто не смог разобраться с существующими примерами. Может быть, нам стоит включить пример гибридных приложений, если это обычное дело, которое люди делают с Gatsby? Я был бы готов помочь с этим, если это необходимо.

Еще раз спасибо за ваше время на создание и поддержку этой библиотеки

Часть пути 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

Я извлек из приложения, надеюсь, это поможет решить ваши проблемы, проблема возникла bc внутри 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/*`] },
    },
  ],

плагины / макет приложения / 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;
};

плагины / приложение-клиент-только / 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 , но, что бы я ни делал, сначала мой клиентский путь 404, затем он начинает загружаться (и пользователи уходят, прежде чем он начнет загрузку)

страницы / приложение / 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 .

Компонент My CreateSchedule отлично работает без 404: https://www.appointmentscheduler.org/app

Проблема находится в маршруте / компоненте ViewSchedule: https://www.appointmentscheduler.org/app/1b42d8e8-66b5-4a8d-a0b5-fd4bb13bed09

Да, и 404 возникает только после сборки - на сервере разработки нет этой проблемы

Есть идеи?

@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 одна дополнительная проблема, потенциально

@ cf73 пробовали ли вы указать свой DNS GoDaddy на что-то более подходящее для Гэтсби, например Netlify?

@rozenmd, чтобы уточнить, безголовая CMS drupal размещена на 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. Сроки жесткие, поэтому, если в ближайшие несколько часов или самое большее на следующий день или около того не будет решения для этого, мне придется искать другой подход. Может ли кто-нибудь предложить, что я могу сделать немедленно (включая переключение хостинга, если это необходимо), чтобы решить эту проблему? есть ли проверенный рабочий процесс drupal + hosting + Gatsby?

@ cf73 Я чувствую вас насчет крайних сроков - если бы вы могли поделиться конфигурацией для своего сайта drupal, у меня был бы сайт для тестирования изменений (публично здесь или в частном порядке на Discord - https://discordapp.com/invite/0ZcbPKXt5bVoxkfV с PM to меня - моя ручка там grajen3), я бы посмотрел, смогу ли я сделать это сам сегодня

@pieh, это было бы

@KyleAMathews Я столкнулся с отчаянной проблемой во время работы над клиентским сайтом, что, я уверен, легко, но я чего-то

Запрос должен быть таким:

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

Вы также можете отфильтровать allNodeArticle по идентификатору, но если вы выбираете только одну вещь, будет проще запросить NodeArticle напрямую.

@KyleAMathews, большое вам спасибо! Можете ли вы указать мне на любую документацию, в которой это описано? Я пока не сталкивался с этим ... уникально ли это то, как Gatsby общается с Drupal, или базовое стандартное поведение GraphQL, которое я только что пропустил? Может быть идея продвигать любую документацию по исходному коду, такую ​​как эта, более наглядно вместе с исходным плагином?

Это основная функция Gatsby (фильтрация выполняется на уровне корневого запроса), а не специфична для Drupal. Плагины исходного кода не могут определять схему graphql - это задача, которую ядро ​​gatsby выполняет на основе «сырых» данных, предоставляемых плагинами.