Rest-API vs GraphQL-API

1740 ワード
テキストリンク

1.APIのタイプ


1) rest-API

  • 関数名は、ウェブアドレスの形式である.
  • 応答結果は、バックエンド開発者が作成した関数からすべてのデータを受信することを要求する.
  • リクエスト責任者はaxiosです.

    • 2) graphql-API

  • 関数名は、通常の関数の形式です.
  • 応答結果は、バックエンド開発者が作成した関数からのみ必要なデータを抽出できます.
  • リクエスト担当者はapollo-clientです.

    • 2.API方式


    Create

  • rest-API : Post
  • graphql-API : Mutation

    • Read

  • rest-API : Get
  • graphql-API : Query

    • Update

  • rest-API : put
  • graphql-API : Mutation

    • Delete

  • rest-API : Delete
  • graphql-API : Mutation

    • 3.実際の使い方


    1) rest-API

    	import axios from 'axios'

	const result = axios.post(API이름입력)
   	const result = axios.put(API이름입력)
  	const result = axios.delete(API이름입력)
   	const result = axios.get(API이름입력)

    2) graphql-API

    	import {useMutation, useQuery} from '@apollo/client'

	const result = useMutation(API이름입력)
   	const result = useQuery(API이름입력)

    4.APIリスト


  • APIユーザーズガイドを使用してホームページを作成する前に、Back-end開発者が作成するAPIの数、構成などを決定する必要があります.

  • APIリストは、Back-end開発者から入手する必要がありますが、直接ドキュメント形式で記入するか、REST APIでSwaggerを使用し、Graphsql-APIでPlaygroundを使用します.

    • 5.API要求結果タイプ（JSON）


  • JSON(JavaScript Object Notation):JavaScriptのオブジェクトとして表示されます.

  • 例)
    • { 
  classmate: "철수",
  age: 13

    5.rest-API切替と切替解除


    おおげさに言う


    これは、
  • データベースのエントリがクライアント要求のデータよりも多いことを意味する.

    • 不公平

  • データベースのエントリは、クライアント要求のデータより少ないか、または存在しないため、追加の要求データが必要です.
    • HTML 5を使用した掃海艇
    TDDから始める方法