引き続き混同整理のシリーズ第1弾]apollo-clientを使ってgraphql音楽を実行する方法

apollo-client graphql音楽の実行方法

apollo-clientがappをインストールしているかどうか.js確認に入ります.

uriに接続されたバックエンドアドレスを追加!

突然変異を使用する前に、私たちが使用する突然変異が正常に動作しているかどうかを運動場で確認します.

3.正常に動作している場合は、apollo-clientのツールを変異を実行するページの上部に読み込みます.

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

4.グラウンドのコードをJavaScript入力部にコピーし、gql``の間に貼り付け、以下に示すように変数/定数を作成します.
以下のCREATE BOARDを大文字にするのが慣例です

// graphql 코드 생성
const CREATE_BOARD = gql`
	mutation {
		createBoard(
			writer: "훈이",
			password: "1234",
			title: "안녕하세요 훈이에요",
			contents: "반갑습니다"
		){
			message
		}
	}
`

🐣CREATE BOARDという名前の変数にcreateBoardという音楽が入っています!

で作成したgql変数/定数を使用して、ユーザーワークステーションを作成します.

// mutation 코드 생성
const [createBoard] = useMutation(CREATE_BOARD)

(createBoardは変異を実行する名前で、任意の名前を使用できます)

投稿登録ボタンをクリックすると、実行する関数で変異コードが実行されます.

function handleClickPost(){
  
  createBoard({
      variables: {
          aaa: "훈이",
          bbb: "1234",
          ccc: "안녕하세요 훈이에요",
          ddd: "반갑습니다"
          }
      })
      return (
          <button onClick={handleClickPost}>게시물 등록</button>
      )
}

🐣 変数は形式です!なぜ変数を書いたのですか?こんな悩みはここまで!

投稿が正常に登録されていることを確認します.

📢しかし、上記のコードは常に同じ投稿に登録されています.ダイナミック値を取得して与えるには、CREATE BOARDの一部を変更する必要があります.この場合は$.$を使用します.変更された値の前に作成された場合は、「この値は変更された値」を表します.
変更されたコードを確認しましょう.

これもずっと同じデータしか入ってこないので、入ったデータを一定の値ではなくstateに変更すれば完成です!

🐣遊園地の見方！

🐣私のポートフォリオコードからデータストリームを理解しましょう。

最初のオプションでは、ユーザーに要求された値を作成します.
価格がリーズナブルであれば、2番確認タイプに移動します.いずれも正常に確認できたら3回行います.
ユーザから受け取った値をバックエンドで渡されたcreateBoardに入れます.
また、それらをすべて配置したら、バックエンドからその投稿のid値を取得します.(idだけお願いしたので)
では、受信したid値はどこから表示できますか?5番について行けばいいです.
result.data._IDじゃないresultdata.createBoard._idの原因はconsoleです.ロゴ(data)を撮って確認できます.
その結果、バックエンド名dataのオブジェクトにはcreateBoardというオブジェクトにidやその他のデータ値が追加されます.data.createBoard._IDで持ってきます!
バックエンドからどのように渡すか分からないため、コードを処理するときにconsoleが使用されます.ロゴ撮影で確認する習慣をつける.
あの紫色のcreateBoardは何ですか?createBoardの音楽をCREATE BOARDに含め、そのCREATE BOARDが実行する変数の名前はcreateBoardです.混同しないで!