Search by

    gatsby learning memo

    gatsbyについての理解したことを随時まとめ

    コマンド


    gatsby clean

    graphQLのスキーマ定義は自動でしてくれるけど、ふとした拍子に意図しない型付けになることがある。 その場合、gatsby cleanを実行するとキャッシュを削除すると上手く動くようになる。

    プラグイン


    gatsby-remark-prismjs

    下記のように、.mdfileからキレイにコードを表示してくれる。

    gaga
    class UploaddataList(ListView):
        model = Uploaddata
        ordering = ['-pk',10]
    
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        // highlight-next-line
        context['GS_BUCKET_URL'] = GS_BUCKET_URL
        return contex
    

    テーマも選べる。

    gatsby-remark-emojis

    .mdfileでemojiを使えるようにする。

    emoji-rocket emoji-blush emoji-eyes emoji-smile emoji-wave

    emoji cheatseatが一覧でemojiを確認出来て便利

    gatsby-config.js


    サイトの諸々の設定をここでする。(confもjsで記述するのが新鮮だった。)

    plugin

    インストールした プラグインは、gatsby-config.jsで使用宣言する。 適宜オプション等が指定できるので公式のUsageを確認して、設定する。

    メモ(描画にいたる流れ)


    • URLにアクセス
    • サーバがsrc/pagesフォルダ以下のファイルを探索
    • 該当するファイルがあれば,それを表示
    • その際、js以外のファイル、例えばmdをhtmlに変換する仕組みをプラグインが提供している。
    • gatsby-source-filesystemはファイルシステムのデータをfetchできるようにするプラグイン
    • これによって、mdファイルを見つけることができる様になる。
    • react-componentはgraphQlを利用して、自身にデータをロードする。

    graphQL


    作成したreact-componentに対して、外部からデータを取り込む時に利用している。

    GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

    GraphQLはAPIsのためのクエリ言語で、既存データとそれらのクエリを流し込むためのランタイムです。GraphQLは完全で、理解しやすい、APIの中のデータについての記述仕様を提供します。クライアントが正確に必要なものを尋ねれるようにしています。APIの進化を容易にして、開発者ツールを強力にします。

    GraphiQL Explorer

    • graphQLのクエリを作成にはGraphiQL Explorerが利用できる。
    • ブラウザで取得できるパラメータが一覧でき、インタラクティブにクエリを作成できる。

    Tags