05.最新APIとGraphQL APIの比較

フロントエンド開発者になるために、あるいはフロントエンド開発者になるために、本当に知っておくべきことがたくさんあるので、その中の1つの通信とAPIについての文章を書きたいと思います.
フロントエンドはなぜ通信とAPIを知っているのですか?これはバックエンドの領域ではありませんか?と思うかもしれません.
私も同じ考えを持っています.これは私があまり興味のない分野だからです.
しかし、考えてみてください.もしあなたがクールでスタイリッシュなサイト(またはアプリケーション)を作成し、登録情報を入れても参加できないと発表したら?いつもボタンを押して登録した投稿を登録または変更しても、何の反応もありませんか?めまいがしますか?
もちろん、その場合、100%通信に関する問題であることは保証できませんが、その理由があれば、それを知ったほうがいいのではないでしょうか.
世界ブロードバンドネットワーク(www:World WideWeb*通称Web)とは、インターネットに接続されたユーザが互いの情報を共有できることを意味する.
インターネットと同じ意味ですが、正確にはWebはインターネットサービスの一つです.
私たちがよく使うNAVERやグーグルは代表的なWebで、ウェブサイトの一番前のhttpは2台のコンピュータの間でテキスト/ハイパーテキストデータを交換するチャネルです.
ファイルの送受信経路をFTP,簡易メールクラスをSMTPと呼ぶ.

ハイパーテキスト:

通常のテキストとは異なり,文や単語などがリンクで構成されたネットワーク状の文書である.代表的なハイパーテキストにはhtmlドキュメントがあります.

BSSはハイパーテキストが何であるかを明確に表示できる
1991年から現在まで運営されている長寿BBSです.
しかし、上の写真を見ると、私たちが知っているサイトとは違いますか?

APIバー

アプリケーションプログラミングインターフェース(API)は、コンピュータまたはコンピュータプログラム間の接続である.他のタイプのソフトウェアにサービスを提供するソフトウェアインタフェースです.
出典-ウィキペディア/22年01月13日
APIは、コンピュータと人間とを接続するユーザインタフェース(UI)とは逆に、コンピュータとソフトウェアとを接続する.
定義だけ見ていると、ソフトとパソコンを接続するというのはどういう意味かと思いますが、簡単に言えば、Front-endがBack-endにデータを送信する際に実行するBack-end機能です.
プログラムは思ったよりずっと簡単で、title:タイトル(少なくとも表通りに記入)、記入したデータを保存するapi、記入したデータをサーバに送信するapiなどの機能を含むapiがなければ、これらはデータにすぎません.
front-endで記入したデータをBack-endのコンピュータに送信し、back-endは送信したデータを受け取ったと答え(応答)、受信したデータをデータベースに保存し(DBとExcelを同じテーブルに格納)、back-endは必要な情報を取り出し、front-endで要求したデータを再送する.
単純でデータを格納するだけでなく、データベースが変更されるたびに同じ方法で実行され、すべての操作は要求と応答によって完了します.
しかし、APIの定義や説明から見ると、可視部分を担当するフロントエンド開発者よりも、データを担当するバックエンド開発者のほうが知っているようですが、なぜフロントエンド開発者も知っているのでしょうか.
これは、フロントエンド開発者とバックエンド開発者が一緒に働いているからです.
冗談じゃない、本当だ.それぞれ担当する業務は異なりますが、一緒に働く職業の特徴で、スムーズなコミュニケーションとより良い業務のために、先端開発者が知っていればよかったので、復習兼記録を残しました.
私はapiとは何か知っています.なぜ私が知っているべきか知っています.だから、あなたは私にどのように書かせますか.
私が言いたいのは私と同じ考えで、この文章を読む人のために、実際の仕事でよく使うrest apiとGraphql apiです.

1.Rest APIの特性

RESTはReresentation State Transferの略で、最初はRoy Fielding博士号論文で紹介された.彼はHTTPの主な著者の一人であり、当時のWeb(HTTP)設計の優秀性よりも正常に使用できないことを惜しみ、Webの長所を最大限に活用できるアーキテクチャでRESTを発表した.
REST APIは、いくつかの機能を提供します.
けんさ
-ユニフォーム(ユニフォーム画面)
Uniform Interfaceとは、指定されたリソースをURIで統一した限定的なインタフェース操作を行うアーキテクチャスタイルです.
**ステータスなし**
RESTは無状態性であり,動作に特化した状態情報は記憶されていない.セッション情報を格納および管理しないため、APIサーバは、受信した要求を処理するだけで済むため、サーバの拡張性が高いという利点がある.また,サーバ上で不要な情報を管理する必要がなく,簡単に実施するだけであることが特徴である.
-キャッシュ可能
RESTの最大の特徴の1つは、HTTPという既存のWeb規格を踏襲していることであるため、Web上で使用されている既存のインフラストラクチャを完全に利用することができる.したがって、HTTPが有するキャッシュ機能は可能であり、HTTPプロトコル規格で使用される最後の修正フラグまたはE−Tagを用いてキャッシュを実現することができる.
-自己記述(自己表現構造)**
RESTのもう1つの大きな特徴は、REST APIメッセージを表示するだけで簡単に理解できる自己表現構造である.
-クライアント-サーバ構造
RESTサーバはAPIを提供するため,クライアントはユーザ認証やコンテキスト(セッション,ログイン情報)などの構造を直接管理し,各ロールに明確な区別があるため,クライアントとサーバ開発の内容がより明確になり,相互依存性がより小さくなる.
-階層構造
RESTサーバは複数の階層に分けられ、セキュリティ、ロードバランシング、暗号化層を追加することで構造上の柔軟性を提供し、PROXY、ゲートウェイなどのネットワークベースの中間媒体を使用することができる.

2.GraphQL APIの特性

Graphqlは、クライアントシステム上でgql文を記述および呼び出すFacebook上で作成されたクエリー言語です.
同じクエリ言語Structed Query Language(以下、sqlと略す)とは異なり、Graphqlの目標は、Webクライアントが効率的にサーバから情報を取得できるようにすることである.

例

import { gql, useMutation, useQuery } from "@apollo/client"
import styled from "@emotion/styled"
const FETCH_BOARDS = gql`
  query fetchBoards {
    fetchBoards {
    			  number
    			  writer
                  title
                  createAt
    }
  }
` next.js안에서 gql을 통해 boards를 불러왔다.

[GraphQlパイプライン-Kakao Tech]

3. Rest API vs GraphQL API

注釈とソース:2022.01

rest api: https://meetup.toast.com/posts/92

graphql : https://tech.kakao.com/2019/08/01/graphql-basic/