Gatsby: gatsby.jsを使用したアプリの構築：欠点は何ですか？

フィードバックをありがとう、@ barbush。 68語が多すぎるとは思いませんでした。

見出しには基本的にすべてが書かれています。gatsby.jsを使用してアプリを作成すると、どのような欠点がありますか？

私はアプリを構築することが可能であることを知っています。 私の質問は、gatsby.jsが静的なWebサイト生成用に最適化されているため、どのような欠点がありますか？ 後でお尻に噛み付くようなものはありますか？
私にはかなり特有のようです。

Woah woah woah @ barbush私は本当にあなたにこのような質問を取り締まらせたくありません。 それがひどい質問である場合（これはそうではありません）、それを無視してからその人に告げる方が良いでしょう。 このような質問には二度と答えないでください。

あなたの質問に@bolus 。 Gatsbyは、reactアプリやその他のwebpack / reactセットアップを作成するのとかなり似ているように設計されています。 したがって、Webアプリの構築に完全に使用できます。 examplesディレクトリを見ると、reduxの例があります。 伝えられるところによると、人々はそれをApolloで非常にうまく使用しています。 リレーは、graphqlの使用法がgatsbyと競合するため、gatsbyで使用することはできませんが、将来的には簡単に回避できると確信しています。

私が知っている主な欠点は、「ページ」を作成していることを前提としているため、ページのないまっすぐなアプリを作成している場合、それはあまり効果がなく、自由をいくらか制限することにもなります。 その場合は、CRAのようなよりバニラなセットアップを使用したほうがよいでしょう。

ただし、「ページ」を作成している場合は、アプリを高速で起動するための自動コード分割と静的SSRを取得できるため、gatsbyは優れています。

いつかもっと正式なトレードオフ文書を書きたいと思いますが、それまでの間、ここで質問を受け付けて喜んでいます。

@KyleAMathews ：ありがとう、まさにそれが私が探していたものです。

コンテンツ主導のWebサイト（ブログ、販売ページ、ドキュメントなど）を作成することを計画しています。簡単にするために、同じドメインでいくつかの小さなシングルページアプリをホストしたいと思います。

ギャツビーはこれに理想的であるように見えます。

また、あなたの自由をいくらか制限します

私のユースケースではおそらく問題ありませんが、私が期待できる制限と、それらを回避するのがどれほど難しいかを教えてください。

ギャツビーを作成してくれてありがとう、ところで、ギャツビーは本当に素晴らしく見えます！ :)

しかし、私が期待できる制限と、それらを回避するのがどれほど難しいかを教えてください。

Gatsbyは可能な限りシンプルで控えめなものにしようとしているので、特にGatsbyが設計されているコンテンツ/ページのWebサイトを作成しているときに、制限にぶつかることはないでしょう。

Gatsbyは、Webアプリとサイトのアイデアをブレンドして、非常に高速なサイトを可能な限り簡単に構築するための理想的な開発および作成ツールを作成するように設計されています。

「ページ」モデルから抜け出す方法で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迅速な返信ありがとうございます

私は土曜日にギャツビーと遊んで、この例をチェックして、1つをやり直しました...自分をそれほど明るくしないことについて申し訳ありませんが、私はそれについてもっと情報を与えることができたでしょう

私がやろうとしていることは、 https ： /app内に配置することです。

この定型文は次の要素で構成されています。
react / redux（ホットリロードあり）/ react router redux

私はJSの経験があまりありません。 多分それは私が欠けている詳細だけです..もう一度ありがとう！

ギャツビーをreact-boilerplateのようなものの中に入れることはできません。 Gatsbyは、サイトの構築と実行を処理したいと考えています。 代わりに、「アプリ」パーツをギャツビー

ええ、それは私が意味したことです... gatsbyは私のすべてのウェブサイトとそのページを処理し、 react-boilerplateはクライアント専用ルートとして/app下でgatsby内に入ります...それは可能です（考慮してそのスタック、特にreact-router-redux）？

Gatsbyはすでにすべてのwebpack / Babel / other構成を処理しているため、ブートストラッププロジェクトは必要ありません。

@KyleAMathews redux + apolloクライアントを使用してクライアント専用アプリを機能させる方法を理解しました。返信ありがとうございます😉👍

@KyleAMathewsここで小さな問題に直面しています。クライアント専用ページ内でgraphqlapolloクライアントを使用していますが、クライアント側専用です（ログインする必要がある場合）が、Gatsbyはインデックスファイルを生成しようとしますビルド時; もちろん、何がエラーになりますか

このHTML作成をスキップする方法について何か提案はありますか？

更新：
https://www.gatsbyjs.org/packages/gatsby-plugin-create-client-paths/を使用してい

私はそのプラグインを作成deletePageに基づいてpage.path ...ないことを確認、それは😄最良の方法ですが、私のユースケースのために働いている場合（ええ、今私が作成する必要があり、それは完璧に働いていますが常にapp/index.htmlに送信するnginxのリダイレクトルールですが、それは以前のアプリで行ったこととまったく同じです...

私はギャツビーにますます慣れてきており、進歩するたびに幸せだと告白する必要があります...素晴らしい仕事@KyleAMathews !! 👏

@KyleAMathewsご迷惑をおかけして申し訳ありませんが、頭を包むことができなかったため、クライアント側のルーティングについて質問するのに適した場所のようです。

したがって、私のユースケースでは、Firebaseからデータを読み取っていますが、ユーザーが変更できるため、このデータはビルド時にすべて利用できるわけではありません。

そのため、Gatsbyページ（例：/ podcasts）では、cDMのfirebaseからデータを簡単にクエリできます。 しかし、詳細ページ（例：/ podcast /：id）に行きたいのですが、少し迷ってしまいます。 そのルートをクライアント側のルーティングに委任する必要がありますか？

/appスケープハッチのアイデアは、その下にSPAを置くことができる場所を用意することだと理解していますが、私がやろうとしていることにはやり過ぎのようです。

ギャツビーでのあなたの仕事に感謝します、それは至る所で素晴らしい経験でした:)

@gafemoyanoが/podcast/:idルートを作成することは、ユーザーが作業中に作成したポッドキャストがある場合

このページのユーザーの興味を引く—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に保存するキー/値キャッシュAPIについてコメントしました。おそらく、レイアウトとページコンテンツがあり、何も変更されていないことを確認します（データとビジュアル）

@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 = "/ app /：path";

// Update the page.
createPage(page);

}

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

import {Switch、Route} from'react-router-dom '
const AppIndex =（）=>（

/ app / podcasts /：idにアクセスしてPodcastDetailsをレンダリングすると、パスの：id部分にアクセスして、コンポーネント内のデータをフェッチできますか？

このような単純なシナリオでご迷惑をおかけして申し訳ありませんが、既存の例では理解できませんでした。 人々がギャツビーで行うのがかなり一般的なことである場合は、ハイブリッドアプリの例を含める必要がありますか？ 必要に応じて、喜んでお手伝いさせていただきます。

このライブラリ@KyleAMathewsの構築とサポートに時間を

この例のパスのapp部分は任意です。 podcasts必要な名前を使用できます。

サンプルサイトは素晴らしいでしょう:-)うまくいけばすぐに時間があります。 すでにこの問題を解決している他の人を招待して、サンプルコードを共有してください！

私はここにいくつかのサンプルコードを試し

しかし、私はまだいくつかの問題を抱えています。
ここで説明し
要するに、本番用にビルドして/app/ディレクトリの下のルート（たとえばlocalhost:9000/app/posts/1入り、ブラウザを更新すると、404空白のページが表示されます。
localhost:9000/app/でページを更新すると、正常に機能します。
gatsby-plugin-create-client-paths prefixes構成が間違っている可能性があります。

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

そして別の問題は（それが問題であるかどうかはわかりませんが） <Route />を<BrowserRouter>ラップできないことです。
本番用にビルドすると（開発は正常に機能します）、「ブラウザの履歴にはDOMが必要です」というエラーメッセージが表示されます。これは、Gatsbyがノード環境で実行されており、ブラウザがないため、 windowなどがないためだと思います。

最後に、 <BrowserRouter>ラップを削除しましたが、正常に機能します。
私はReactを初めて使用するので、それが問題の適切な解決策であるかどうかはわかりません。

助けを求めたいです:)

@danielemeshこんにちはダニエル。 gatsbyアプリの作業に戻る時間がありませんでしたが、ソースコードからわかるのは、 /app/*ディレクトリを/pages内に配置したことです。
どこに行くのかわからないので、 src/ディレクトリに置いてみます。

それがうまくいくかどうか私に知らせてください！

乾杯！

@gafemoyanoはそれを試しましたが、機能しませんでした:(
ギャツビーはそれを認識しません。

ありがとう！

私はいくつかのプラグインに直面したので、私のものを書くことにしました（元のプラグインから100％借りました）、それで幸運にも私の問題を解決し、gatsbyプラグインの書き方を学ぶことができました

私はアプリケーションから抽出しました、それがあなたの問題を解決するのに役立つことを願っています、問題はapp内のbcに直面しましたSSRでは処理されるべきではないgraphqlクエリがあります、ブラウザだけです

@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に関連しているかどうかは

pages / 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)
  }
}

gatsby-plugin-create-client-pathsプラグインも運が悪かったので試しました。

私のCreateScheduleコンポーネントは404ingなしで正常に動作します： 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-config.jsに'gatsby-plugin-netlify'がなかったようです

それを追加してデプロイすると、この問題が修正されました😄

@KyleAMathews Gatsbyの使用に伴う可能性のある

@ cf73 GoDaddy DNSを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を使用したいと思います。 締め切りが厳しいので、今後数時間またはせいぜい翌日かそこらでこれに対する回避策がない場合、私は別のアプローチを探す必要があります。 誰かがこれを解決するために私が即座に何ができるか（必要に応じてホスティングを切り替えることを含む）を提案できますか？ 実証済みのDrupal +ホスティング+ギャツビーワークフローはありますか？

@ cf73締め切りについて感じます-https：//discordapp.com/invite/0ZcbPKXt5bVoxkfV with PM to私-私のハンドルはgrajen3）です、私は今日それを自分でできるかどうかを確認します

@piehそれは素晴らしいでしょう、ありがとう！

@KyleAMathewsクライアントサイトで作業しているときに絶望的な問題に直面しています。これは簡単だと思いますが、何かが足りません。 Stackは、Gatsbyのgraphiqlに対するDrupalJSON-APIです。 ノードに引数を渡すことはできません（添付を参照）。 私の知る限り、これはギャツビーのDrupalスキーマが完全に具体化されていないためですか？ それとも私は一歩を逃していますか？ どんな助けでも緊急にそして大いに感謝します!!

クエリは次のようになります。

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

allNodeArticleをIDでフィルタリングすることもできますが、1つだけを選択する場合は、 NodeArticle直接クエリする方がクリーンです。

@KyleAMathewsどうもありがとうございました！ これがカバーされているドキュメントを教えていただけますか？ 私はこれまでこれに出くわしていません...ギャツビーがDrupalと話す方法、または私が見逃したばかりのGraphQLのコア標準動作に固有ですか？ このようなソース固有のドキュメントをソースプラグインと一緒にもっと目に見える形で宣伝するというアイデアはありますか？

これはgatsbyのコア機能（実行されたルートクエリレベルのフィルタリング）であり、drupal固有ではありません。 ソースプラグインはgraphqlスキーマを定義できません-これは、プラグインによって提供される「生の」データに基づいてgatsbyコアが実行しているタスクです。