hasura =とRedwoodjs❤️

RedWoodjsは、完全なスタックアプリケーション開発の新しい感覚です.それは技術の選択と非常に独断的です.このブログは、どのようにRedwood JSとハサラを使用して、それはダブル素晴らしい作る方法についてのステップチュートリアルです.
前進する前に、我々の2人の参加者レッドウッドとハハラについての小さな紹介をしましょう.
レッドウッドJS :

_ Redwoodは、あなたが簡単にJamstackアプリケーションを構築して、配備することができる独断的で、完全なスタック、Serverlessなウェブアプリケーションフレームワークです

レッドウッドJSは、最新の出血技術の多くを使用して、開発者から離れてすべての複雑さを抄録.これは、フロントエンドのアポロとの反応を使用して、ページ、セルなどの開発を非常に簡単にするコードジェネレータの多くを持っています.また、ボックスのテスト、ストーリーブックなどの設定の面倒を見る.これは、そのグラフィカルなバックエンドのPrismaを使用して、ダッシュボード/GUIのサポートをすばやくバックエンドを作成することができます.魅力的なサウンド?それだけでなく、NetLify、AWSなどのボックス展開からサポートしています.
つの行では、開発者だけのスタイルとビジネスロジックを記述する必要があります.他のすべての世話をされています.
長倉

_ あなたのデータのためのビルトイン認可で即座のgraphql

hasuraは、既存のデータベースから即座にGraphSQLのバックエンドを構築できる未来のツールです.これは、公園内の散歩として簡単にグラフィカルなバックエンドを作成することができます.
問題
両方のツールの私の等しい愛は、一緒にそれらを使用するための欲求を作成しました.しかし、レッドウッドJSは非常に独断的でした、そして、箱からそれをするどんな規定も持ちませんでした.これによって、それらのコードベースを探索し、RedWooks + Hasuraでアプリケーションを構築する簡単な手順を理解できました.
なぜハラ?
我々はちょうどレッドウッドのフロントエンドの部分に焦点を当てるならば、それはあなたがボックスから必要な文字通りのすべてを提供します.これは、ページを作成し、同様に手動でルートを制御することができます(カスタマイズの場合)、それはあなたがストーリーとテストを事前に設定と一緒にセルを作成することができます.彼らは将来的にネイティブと電子の反応をサポートします.したがって、すべての複雑さを抽象化した理想的なフロントエンドの一種です.
レッドウッドを使うどんなフロントエンドエンジニアも、それを愛し始めます.しかし、制約は、それは非常に独断的です、そして、あなたはデフォルトの統合を使用する義務があります、そして、これは多くの仕事でありえます.一方、ハララは、本当にWedwoodによるワンストップのGraphical解決です.これは直接Web側(Redwoodはフロントエンドを呼び出す)によって消費することができますまた、特にAuth/Webhooksなどをサポートしています.特にDBがPostgresであるとき、Hasuraは純粋な黒魔術です.また、Spsmaで、それは再びスケーラ/パフォーマンスなどの世話をする開発者の責任です.

ステップ1：hasura - graphqlバックエンドを構築する

このチュートリアルを参照してください.here . 私はこのチュートリアルのデモアプリの一つを使用していますhttps://learn-graphql.demo.hasura.app/console .
このバックエンドは私にスーパーヒーロデータに関する質問のセットを与えます.必要なデータを取得するには、次のクエリを使用します.

    query getSuperHeros {
      superhero_aggregate {
        nodes {
          name
          team {
            name
          }
        }
      }
    }

ステップ2：レッドウッドJSアプリをブートストラップ

Redwood JSアプリをブートするには、次のコマンドを実行します.

yarn create redwood-app my-redwood-app

これは、2つのサブフォルダを持つ完全なスタックのboilerplateを作成しますweb and api . Hasuraをバックエンドに使う予定ですので、必要ありませんapi フォルダ.したがって、このフォルダを削除することができます.

ステップ3 :ページを作成する

ページは、アプリケーションの画面/ルートです.各ページは、特定のルートにロードされます.ページを作成するには、以下のコマンドを実行します.

yarn redwood generate page SuperHero /

これは、スーパーヒーローと呼ばれる新しいページを作成しますpages フォルダとルートのページをロードします/ ルートルート.置換できます/ with /custom-route を指定します.
ページは次のようになります.

import { Link, routes } from '@redwoodjs/router'

const SuperHeroPage = () => {
  return (
    <>
      <h1>SuperHeroPage</h1>
      <p>
        Find me in 
        <code>./web/src/pages/SuperHeroPage/SuperHeroPage.js</code>
      </p>
      <p>
        My default route is named <code>superHero</code>, link to me with `
        <Link to={routes.superHero()}>SuperHero</Link>`
      </p>
    </>
  )
}

export default SuperHeroPage

ステップ4：redwoodjsのセットアップハラ

生成されたレッドウッドJSファイルでsrc/index.js ファイルには次のコードがあります.

ReactDOM.render(
  <FatalErrorBoundary page={FatalErrorPage}>
    <RedwoodProvider>
      <Routes />
    </RedwoodProvider>
  </FatalErrorBoundary>,
  document.getElementById('redwood-app')
)

ここでは、アプリ全体が包まれているRedWoodProvider はredwoodjs 図書館.ソースコードによる読み込みApolloProvider の下に.からsource code :

/**
 * Create a GraphQL Client (Apollo) that points to the `apiProxyPath` that's
 * specified in `redwood.toml`.
 */
export const createGraphQLClient = (config: GraphQLClientConfig) => {
  return new ApolloClient({
    uri: `${window. __REDWOOD__ API_PROXY_PATH}/graphql`,
    cache: new InMemoryCache(),
    ...config,
  })
}

/**
 * A GraphQL provider that instantiates a client automatically.
 */
export const GraphQLProvider: React.FC<GraphQLProviderProps> = ({
  config = {},
  ...rest
}) => {
  return <ApolloProvider client={createGraphQLClient(config)} {...rest} />
}

そして、プロバイダーは以下の小道具として設定を得ますRedWoodProvider 下記のようになります.

/* Modified a bit to shorten the code */
const RedwoodProvider: React.FC<RedwoodProviderProps> = ({
  useAuth = window. __REDWOOD__ USE_AUTH,
  graphQLClientConfig,
  children,
  ...rest
}) => {
    return (
      <GraphQLProvider config={graphQLClientConfig} {...rest}>
        <FlashProvider>{children}</FlashProvider>
      </GraphQLProvider>
    )
}

上記のソースコードを考慮すると、RedWoodProviderの小道具に設定を渡すことで既存の設定をオーバーライドできます.The src/index.js に応じて変更されます:

ReactDOM.render(
  <FatalErrorBoundary page={FatalErrorPage}>
    <RedwoodProvider graphQLClientConfig={{
      // URL of your Hasura backend
      uri: 'https://learn-graphql.demo.hasura.app/v1/graphql' 
    }}>
      <Routes />
    </RedwoodProvider>
  </FatalErrorBoundary>,
  document.getElementById('redwood-app')
)

注意:アポロクライアントがサポートしている任意の設定をgraphQLClientConfig 小道具

ステップ5 :セルを生成する

Cells are a declarative approach to data fetching and one of Redwood's signature modes of abstraction.

セルは自動生成されたファイルで、GraphSQLクエリを生成し、クエリの応答に基づいて読み込み/エラー状態またはデータを表示するための足場を持っています.これは、ボイラ板のコードを再入力の努力を削減します.次のコマンドを使用してセルを作成できます.

yarn rw g cell SuperHeros

このコマンドは、scaffoldedテストやstorybooksとともにsrc/componentフォルダ内のセルを生成します.ファイルは次のようになります.

export const QUERY = gql`
  query SuperHerosQuery {
    superHeros {
      id
    }
  }
`
export const Loading = () => <div>Loading...</div>
export const Empty = () => <div>Empty</div>
export const Failure = ({ error }) => <div>Error: {error.message}</div>
export const Success = ({ superHeros }) => {
  return JSON.stringify(superHeros)
}

ここでは、私たちのUI/UX要件に基づいてクエリとコンポーネントを変更する必要があります.上記のファイルを修正して問い合わせを消費しましょう.

export const QUERY = gql`
  query getSuperHeros {
    superhero_aggregate {
      nodes {
        name
        team {
          name
        }
      }
    }
  }
`
export const Loading = () => <div>Loading...</div>
export const Empty = () => <div>Empty</div>
export const Failure = ({ error }) => <div>Error: {error.message}</div>
export const Success = ({ superhero_aggregate }) => {
  return (
    <div>
      {superhero_aggregate.nodes.map((hero) => (
        <li>{hero.name} - {hero.team.name}</li>
      ))}
    </div>
  )
}

今すぐインポートし、我々の中でそれを使用することができますpages/SuperHeroPage/SuperHeroPage.js ファイル:

import SuperHerosCell from 'src/components/SuperHerosCell';
const SuperHeroPage = () => {
  return (
    <>
      <h1>SuperHeroPage</h1>
      <SuperHerosCell />
    </>
  )
}
export default SuperHeroPage

コマンドを実行するyarn rw dev アプリケーションを実行するにはアプリが開きますhttp://localhost:8910/ デフォルトでは.出力は以下のようになります:

タナ!我々は正常にRedWoodjsとHasuraとアプリを作成している.

ボーナス

レッドウッドJSは積極的に多くのツールを構築して、すべてのツールと支持を利用するために、我々も修正しなければなりませんgraphql.config.js ファイル.
ファイルの内容を以下のコードに置き換えてください、そして、あなたはHeduraのSuperpowerとともにRedWooksが提供するすべての利点を楽しむ準備ができています!

module.exports = {
  // URL of your Hasura backend
  schema: `https://learn-graphql.demo.hasura.app/v1/graphql`, 
}

Hasura + Redwoodのサンプル実装を見つけることができますhere . ハッピーコーディング
著者について
このブログの記事はVilva Athiban P Bによって書かれました.そして、JavaScript開発者はHasura Technical Writer Program .