category / GraphQL

GraphQL

【GraphQL】フロントエンドでページネーションを実装する

前回は、バックエンドでページネーションを追加しました。 今回は、フロントエンドでページネーションを実装します。 ソースコードは、こちらです。 バックエンド: https://codesandbox.io/s/2021202-graphql-server-8f9w…

続きを読む
2021年12月03日8 分
GraphQL

【GraphQL】バックエンドでページネーションを追加する

前回は、バックエンドでPostgresSQLからMongoDBへ乗り換えました。 今回は、バックエンドでページネーションを追加します。 ソースコードは、こちらです。 https://codesandbox.io/s/2021201-graphql-server-yyei…

続きを読む
2021年12月02日3 分
GraphQL

【GraphQL】PostgresSQLからMongoDBへ乗り換える

前回は、会員登録機能とログイン機能を実装しました。 今回は、バックエンドでPostgresSQLからMongoDBへ乗り換えます。 コードは、こちらです。 バックエンド: https://codesandbox.io/s/post-20211126-djyyz?fontsize…

続きを読む
2021年12月01日10 分
GraphQL

【GraphQL】フロントエンドで会員登録機能とログイン機能を実装する

前回は、フロントエンドでGraphQLのデータを削除・更新しました。 今回は、会員登録機能とログイン機能を実装します。 コードは、こちらです。 フロントエンド: https://codesandbox.io/s/20211129-graphql-client-zkm7s…

続きを読む
2021年11月30日5 分
GraphQL

【GraphQL】フロントエンドでGraphQLのデータを削除・更新する

前回は、フロントエンドで、GraphQLのデータを作成しました。 今回は、GraphQLのデータを削除・更新します。 コードは、こちらです。 フロントエンド: https://codesandbox.io/s/20211128-graphql-client-7ew3s…

続きを読む
2021年11月29日5 分
GraphQL

【GraphQL】フロントエンドでGraphQLのデータを追加する

前回は、GraphQLで接続したデータ一覧から、詳細画面へ遷移させました。 今回は、フロントエンドでデータを追加します。 コードは、こちらです。 フロントエンド: https://codesandbox.io/s/20211127-graphql-client-10dnx…

続きを読む
2021年11月28日5 分
GraphQL

【GraphQL】フロントエンドで詳細画面へ遷移する

前回は、フロントエンドでGraphQLを接続しました。 今回は、GraphQLで接続したデータ一覧から、詳細画面へ遷移します。 コードは、以下の通りです。 フロントエンド: https://codesandbox.io/s/20211126-graphql-client…

続きを読む
2021年11月27日8 分
GraphQL

【GraphQL】フロントエンドでGraphQLを接続する

前回は、Prismaを使って、ログイン機能を追加しました。 今回は、バックエンドで作成したGraphQLを、フロントエンドで接続します。 バックエンドのコードは、こちらです。 https://codesandbox.io/s/post-20211125-s1lkv…

続きを読む
2021年11月26日8 分
GraphQL

【GraphQL】Prismaを使って、ログイン機能を追加する

前回は、パスワードをハッシュ化しました。 今回は、Prismaを使って、ログイン機能を追加します。 コードは、前回のコードを使用します。 https://codesandbox.io/s/post-20211124-p0uqd?fontsize=14&hidenavigation…

続きを読む
2021年11月25日3 分
GraphQL

【GraphQL】パスワードをハッシュ化する

前回は、Prismaを使って、ユーザー登録をしました。 パスワードは、今のところ登録した内容のまま保存されます。 これでは、セキュリティ上よくないので、暗号化して保存します。 コードは、前回のコードを使用します。 https://codesandbox.io/s/post…

続きを読む
2021年11月24日2 分
GraphQL

【GraphQL】Prismaを使って、ユーザー登録をする

前回は、Prismaを使って、PostgresSQLデータを追加や削除、更新しました。 今回は、ユーザー登録します。 コードは、前回のコードを使用します。 https://codesandbox.io/s/post-20211122-jntb4?fontsize=1…

続きを読む
2021年11月23日8 分
GraphQL

【GraphQL】Prismaを使って、PostgresSQLデータを追加・削除・更新をする

前回は、Prismaを使って、特定のPostgresSQLデータを取得しました。 今回は、PostgresSQLデータを追加や削除、更新します。 コードは、前回のコードを使用します。 https://codesandbox.io/s/post-20211121-ldq2x…

続きを読む
2021年11月22日10 分
GraphQL

【GraphQL】Prismaを使って、特定のPostgresSQLデータを取得する

前回は、Prismaを使って、PostgresSQLデータを取得しました。 今回は、特定のPostgresSQLデータを取得します。 コードは、前回のコードを使用します。 https://codesandbox.io/s/post-20211120-q8u2i?fontsize…

続きを読む
2021年11月21日3 分
GraphQL

【GraphQL】Prismaを使って、PostgresSQLデータを取得する

前回は、Prismaを使って、PostgresSQLデータベースと接続しました。 今回は、Prismaを使って、PostgresSQLデータを取得します。 コードは、前回のコードを使用します。 https://codesandbox.io/s/post-20211118-y3l…

続きを読む
2021年11月20日5 分
GraphQL

【GraphQL】Prismaを使って、PostgresSQLデータベースと接続する

実際のデータベースを使って、GraphQLサーバーを操作します。 今回は、Prismaを使って、PostgresSQLデータベースと接続します。 データベースのプラットフォームは、Herokuを使います。 コードは、前回のコードを使用します。 https…

続きを読む
2021年11月19日3 分
GraphQL

【GraphQL】GraphQLサーバーをTypeScriptへ変換する

前回は、データを追加、削除、更新しました。 今回は、GraphQLサーバーをTypeScriptへ変換します。 コードは、以下のコードを使用します。 https://codesandbox.io/s/post-20211117-j43f6?fontsize=1…

続きを読む
2021年11月18日2 分
GraphQL

【GraphQL】データを追加・削除・更新する

前回は、特定の条件に合致したデータを抽出しました。 今回は、データを追加、削除、更新します。 GraphQL では、データを追加したり、削除、更新したりすることをミューテーションと言います。 コードは、前回のコードを使用します。 https://codesandbox.io/s…

続きを読む
2021年11月17日10 分
GraphQL

【GraphQL】特定の条件に合致したデータを抽出する

今回は、読み終わった本の一覧を取得します。 コードは、前回までのコードを使用します。 https://codesandbox.io/s/post-20211116-before-5ketn?fontsize=14&hidenavigation=1&theme=dark…

続きを読む
2021年11月16日2 分
GraphQL

【GraphQL】1つにまとまっているファイルの構造を再編成する

前回作成したデータが index.js に全て納まっていますので、見通しをよくするために、ファイルを再編成します。 データを再編成する まずは、データを別ファイルにします。 database フォルダを作成し、books.js と categories.js…

続きを読む
2021年11月15日3 分
GraphQL

【GraphQL】オブジェクト同士を関連付けする

前回は、オブジェクトを作成し、GraphQL…

続きを読む
2021年11月14日6 分
GraphQL

【GraphQL】オブジェクトの一覧や特定のオブジェクトを取得する

前回は、GraphQL のセットアップを行いました。 今回は、オブジェクトを作成し、GraphQL でオブジェクトの一覧や、特定のオブジェクトを取得します。 コードは、前回のコードを使います。 オブジェクトを作成する オブジェクトを作成するには、 typeDefs の gql…

続きを読む
2021年11月13日5 分
GraphQL

【GraphQL】GraphQLサーバーのセットアップをする

GraphQL とは、Web API を作成する言語の一つです。 https://graphql.org/ バックエンドから REST API…

続きを読む
2021年11月12日5 分