紹介xdox -スタートの課題は、進捗状況を記録し、世界にそれらを披露

🤔 何がxdoxですか？

xdoxは、あなたが挑戦を開始し、毎日進捗状況を記録することができますWebアプリケーションです.また、あなたのユニークなプロフィールページを介して世界にあなたの進捗状況を表示することができます.これらの課題は、100 daysofcodeから30 daysofrustまでも60 daysoftをすることができます!
また、私のための私の服従ですHasura x Hashnode Hackathon
Live Demo / GitHub Repository

❓ ハスラとは

GraphSQLは、スキーマを持つAPIのクエリ言語です.これは能力を特定のフィールドをクエリするように複数の機能が付属しています、Paginationを行うには、集計クエリを行うと、より多くの.
しかし、GraphSQLバックエンドを作るのは、単純な残りのバックエンドを作るよりも複雑です.Hasura コードの1行を書くことなく、我々のアプリケーションと我々のデータベースを接続するGraphSQLバックエンドを作る簡単な方法を提供します!
また、私たちがコストを心配する必要なしで我々のGaphqlバックエンドを主催することから始めることができるように、ハハラには、まともな無料の層で雲申し込みがあります.それはオープンソースと自己ホッスタです.

📚 技術スタック

どのようなすべての技術私はxdoxのために使用しましたか?
はじめてHasura 私のアプリケーションのバックエンドのために.
それ以外に次のようなサービスを使用しました.

Clerk アプリケーションに認証を追加するにはまた、Hasuraとよく統合され、JWT認証を使用してバックエンドを確保することができました.

Heroku Postgres データベース用.また、朝倉とよく統合した

Vercel フロントエンドをホストするには

ここでは、アプリケーションに使用するライブラリとフレームワークを示します.

Next.js 私のアプリケーションのフロントエンド

TailwindCSS スタイリングフォーマイフロント

Radix UI スタイルやUIのようなスタイルのUIコンポーネント

Headless UI トランジション

Apollo React Client 私のフロントエンドからのGraphicalリクエストを作るために.また、キャッシュの世話をする.

Tiptap 進行状況をログに記録するために使用される

🧐 どのように、xdoxは働きますか？

それは単純な3段階のプロセスです.つは、Googleや電子メールを使用してアカウントにサインアップし、挑戦を開始します.その後、1つは毎日の進捗状況を記録します.

次に、1つは自分の進捗状況を示すために世界に独自のプロファイルページを共有することができます.
また、毎日の進捗状況を記録する必要はありません.アプリは、あなたの挑戦を柔軟にすることができるような方法で構築されています.休暇に行った?いいえ問題は、xdoxはあなたの進行状況を記録していないためにバグを出さない.

バックエンドの確保

バックエンドは、データベースへの直接アクセスし、それを確保するための最良の練習と見なされます.私は私のフロントエンドからGraphSQL APIを使用する必要がありますので、それはパブリックAPIである必要があります.しかしながら、限定された無許可の要求と認可された要求だけができるように、私はそれを確保しなければなりません.
私がユーザ認証のために従業員を使用していたので、これを実装するのに私は長くかかりませんでした.従業員はJWTテンプレートを使用しているHasuraと統合しました.ここではdocumentation explaining how to implement this .
ここでは、店員ダッシュボードからJWTテンプレートを作成します.ここに私のもののように見える

APIへのリクエストを行う際には、Authorization 値としてベアラートークンで.これはhaskeyが署名キーを使って検証されています(これは環境変数を介してhasuraに設定されています).
これはフロントエンドのコードで、リクエストを行う際にベアラートークンを渡すのに役立ちます.

import {
  ApolloClient,
  ApolloProvider,
  from,
  HttpLink,
  InMemoryCache,
} from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import { useSession } from "@clerk/clerk-react";
import { ReactNode } from "react";

const hasuraGraphqlApi = process.env.NEXT_PUBLIC_HASURA_GRAPHQL_API;

interface IApolloProviderWrapperProps {
  children: ReactNode;
}

export const ApolloProviderWrapper = ({
  children,
}: IApolloProviderWrapperProps) => {
  const { getToken } = useSession();
  const authMiddleware = setContext(async (_, { headers }) => {
    const token = await getToken({ template: "hasura" });

    return {
      headers: {
        ...headers,
        authorization: `Bearer ${token}`,
      },
    };
  });

  const httpLink = new HttpLink({
    uri: hasuraGraphqlApi,
  });

  const apolloClient = new ApolloClient({
    link: from([authMiddleware, httpLink]),
    cache: new InMemoryCache(),
  });

  return <ApolloProvider client={apolloClient}>{children}</ApolloProvider>;
};

我々は、単に使用してベアラートークンを取得するgetToken 店員によって我々に利用できる機能はSDKに反応して、それを通りますAuthorization ヘッダ.
現在、ベアラートークンが有効な場合、X-Hasura-User-Id ヘッダは、要求をしているユーザのユーザIDを含むリクエストに追加されます.のヘッダuser ロールも同様に渡されます.これは朝倉側についての配慮である.
私はまた、いくつかの認証されていないリクエストをviewer 役割これは私のHasuraインスタンスの不正な役割として設定され、パブリックユーザープロファイルページで使用されます.ここでは、認証されていない要求を作ることを気にかけるコードです.

import {
  ApolloClient,
  ApolloProvider,
  from,
  HttpLink,
  InMemoryCache,
} from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import { ReactNode } from "react";

const hasuraGraphqlApi = process.env.NEXT_PUBLIC_HASURA_GRAPHQL_API;

interface IApolloProviderWrapperProps {
  children: ReactNode;
}

export const UnauthenticatedApolloProviderWrapper = ({
  children,
}: IApolloProviderWrapperProps) => {
  const authMiddleware = setContext(async (_, { headers }) => {
    return {
      headers: {
        ...headers,
        "X-Hasura-User-Role": "viewer",
      },
    };
  });

  const httpLink = new HttpLink({
    uri: hasuraGraphqlApi,
  });

  const apolloClient = new ApolloClient({
    link: from([authMiddleware, httpLink]),
    cache: new InMemoryCache(),
  });

  return <ApolloProvider client={apolloClient}>{children}</ApolloProvider>;
};

データの行レベル許可の設定

APIが現在確保されていますが、データはデフォルトでアクセスできません.パーミッションを設定する必要があります.これにより、データのアクセスが制限されます.例えば、我々はユーザに彼ら自身のユーザーデータにアクセスするだけで、彼らが作成した個人的な挑戦にアクセスするのを許します.
ありがたいことに、ハハラは再び非常に簡単に行うことができます.例を見てみましょう

ここでは、user つの行だけを挿入できるような役割user_id カラムはリクエストを行うユーザのユーザID(これはヘッダとして渡された)に等しい.
私も許していますuser 特定の列のみを更新するにはここでid 列は自動生成されますgen_random_uuid() PostgreSQL関数.The created_at and updated_at フィールドもバックエンドの世話をしています.
私も、列のためにプリセットを加えますuser_id に等しいカラムX-Hasura-User-Id ヘッダ.今、それは狂った強力です!
同様に、更新、選択、削除の許可を設定しましたuser 私がそれをチェックする役割user_id 列はX-Hasura-User-Id ヘッダ.
のためにviewer 役割、私はそれをこのように設定しました

ここで、視聴者は、データベースから行を選択することができる(すなわち、読み取りデータのみ).私はさらに、チャレンジが公開されていることを確認チェックを追加しました.

👓 私がこのハッカートンから学んだこと

私は過去にGraphqlを使用していますが、私の経験はかなり限られていました.また、私はGraphSQLバックエンドを構築したことがありませんでした.私も前にHasuraを使用したことがなかったし、すべての生産プロジェクトのSQLデータベースを使用したこともありませんでした.
このハッカーは、Hasuraを通してGraphqlのバックエンド側を探索し、より深い概念を理解する機会を与えました.私はまた、リレーショナルデータについて学ぶPostgreSQLデータベースを使用して素晴らしい時間を過ごした.それはクレイジー強力です!

✨ 結論

過去1ヶ月間、私はxdoxに取り組んでおり、多くの新しいことを調査し、学んでいる.私は実際にどのようにXDoxの現実世界で見て興奮している!
さようなら、いい一日を😁🤞

🔗 重要なリンク

XdoX

XdoX GitHub Repository

My profile on XdoX