GraphSQLを使用しないでください.

👍 に従ってください
このチュートリアルでは、Genqlを使用して完全な型のアプリケーションを作成します.以下はツールのリストです.

TypeScript - 将来からJavaScriptをタイプしました.

Hasura - 新しいまたは既存のデータソース上のインスタントグラフと残りのAPI.

React Query - 簡単にフェッチ、キャッシュ、サーバーの状態を管理します.

GenQL - GraphSQL APIの型セーフなGraphSQLクライアントを生成します.

NextJS - 間違いなく最高の反応フレームワーク.

フロントエンド
フロントエンドを生成するには、次のコマンドを使用してNextJS TypeScriptプロジェクトを作成します.npx create-next-app@latest your-app-name --ts
のAPIを作成する
私たちのGraphSQL APIの場合は、先頭にしましょうHasura プロジェクトを作成する-アカウントを作成する必要があります.完了したら、「プロジェクトを作成」オプションを選択し、すべての無料ティアオプションを選択します.をクリックして“起動コンソール”と、あなたはhasuraコンソールが表示される必要があります.
我々は急速に我々のアプリケーションのフロントエンドとAPI層を生成しただけで、dBの層を残し残した.ありがたいことに、ハハラは私たちの背中を持っています.
Hasuraコンソールから「データ」タブをクリックし、データベースを接続するボタンを参照してください.ここから、「Herokuデータベースを作成する」オプションがあるべきです.これらの手順に従ってください( Herokuにサインアップしなければならないかもしれません).


データベースの作成
さあ、テーブルを作りましょう.このアプリケーションのために私はサッカー(サッカー)のテーマになるので、私たちのテーブルの名前をしましょうteams .

頻繁に使用される列のボタンが便利であり、すぐに列を追加することができますid , created_at and updated_at . 型の列を追加するText 名前name チーム名を保存する.

「表を追加」をクリックして表を作成します.
テーブルを作成した後、「挿入」タブで手動でテーブルの行を作成できます.

頭の“API”タブにすると、今すぐHasuraの遊び場を使用してデータベースからデータを照会することができます😎.


フロントエンドへ
バックエンドの設定があります.我々のフロントエンドから我々のGraphSQL APIと対話するために、我々はGraphSQLクライアントを使用しているようになりますGenQL したがって、NextJSアプリケーションに依存関係をインストールする必要があります.

npm i -D @genql/cli # cli to generate the client code
npm i @genql/runtime graphql # runtime dependencies

@ genql/cliはdev依存性です.なぜなら、クライアントを生成する必要があるからです.
クライアントを生成するには、次のコマンドを使用できます.

 genql --endpoint <your graphql endpoint from hasura console> --output ./genql-generated -H 'x-hasura-admin-secret: <your admin secret from hasura console>'

生成されたファイルが関数を公開するcreateclient . これはリクエストを送信するために使用できるクライアントを作成します.
プロジェクトのルートにファイルを作りましょうgenql-client.ts クライアントを作成するには、次のコンテンツを使用します.

import { createClient } from "./genql-generated";

const client = createClient({
    url: <your graphql endpoint from the hasura console>,
    headers: {
        'x-hasura-admin-secret': <your hasura admin secret from hasura console>,
    },
})

我々のホルスターの我々のGraphSQLクライアントで、我々は発火要求を始める準備ができています.
我々は、フェッチとサーバーの状態を管理するためにResponseクエリを使用するつもりです.

npm i react-query

このチュートリアルの目的のために、我々はちょうどNextJsによって提供されるデフォルトのインデックスページで要求をするでしょう.だから頭にpages/index.tsx そして、既存の輸入の残りの下で我々のクライアントを輸入してください.
私は、内部で働くのが好きですsrc あなたの輸入が私のものより高いレベルであるかもしれないように、ディレクトリ.NextJSは動くpages ディレクトリをsrc ディレクトリからのディレクトリ.

// ...existing imports
import { client } from '../../genql-client'

データベース内のチームを取得する関数を作成しましょう.コピーして、下のコードを過ぎないでください.それをタイプして、あなたのOSに従いCMDまたはCtrl +スペースを使っている自動補完を評価してください😎

const fetchTeams = () => {
  return client.query({
    teams: [{}, { id: true, name: true, created_at: true }],
  });
};

genqlドキュメントを構文で参照しますが、クエリのビルド方法についての一般的な考え方を得ることができます.もう一度、自動補完は良い友人のようにあなたを案内します.
生成されたファイルもeverything このようにして、すべての型にブールを提供する代わりに、型内のすべてのフィールドを問い合わせます.

// ...existing imports
import { everything } from "../../genql-generated";

const fetchTeams = () => {
  return client.query({ teams: [{}, everything] });
};

さあ持ち込みましょうuseQuery 応答クエリから、それを私たちのfetchteam機能に配線します.

// ...existing imports
import { client } from "../../genql-client";
import { everything } from "../../genql-generated";
import { useQuery } from "react-query";

呼び出すuseQuery フックインサイドHome ページコンポーネントで、クエリキーとクエリ関数をそれぞれ2番目と3番目の引数として提供します.

  const { data } = useQuery("teams", fetchTeams);

ほとんどそこ!我々のアプリをラップする必要があります<QueryClientProvider /> コンポーネントは、我々に反応質問によって提供されます.これは、木の上にさらに加えなければなりません_app.tsx ファイル.更新_app.tsx 次のコードを使用します.

import type { AppProps } from "next/app";
import { QueryClientProvider, QueryClient } from "react-query";

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

export default MyApp;

更新しましょうindex.tsx ページは次のように見えます、そして、我々はページで我々のチーム・レンダリングを見ていなければなりません.

import type { NextPage } from "next";
import styles from "../styles/Home.module.css";

import { useQuery } from "react-query";
import { client } from "../../genql-client";
import { everything } from "../../genql-generated";

const fetchTeams = () => {
  return client.query({ teams: [{}, everything] });
};

const Home: NextPage = () => {
  const { data, isLoading } = useQuery("teams", fetchTeams);

  return (
    <div className={styles.container}>
      <h1>Teams</h1>
      {isLoading && <p>Loading...</p>}
      {data && data.teams.map((team) => <p key={team.id}>{team.name}</p>)}
    </div>
  );
};

export default Home;

このチュートリアルの範囲を超えてSSR/NextJSを使用してクエリを使用するときに、特定のベストプラクティスがありますhere .
私は、突然のアプリケーションを作成するために突然変異とgenqlを使用してフォローアップポストを行うことができます