[ 16 ] graphql 데이터 전달 실습

변수를 graphql 에 전달하는 방법

mutation을 작성할 때 변수에 $ 를 넣고, 타입을 지정해주어야 한다.

함수를 호출할 때 variable 속성을 넣어주어야 한다.

import { useMutation, gql } from "@apollo/client";

const 나의그래프큐엘세팅 = gql`
  mutation createBoard($writer: String, $title: String, $contents: String) {
    createBoard(writer: $writer, title: $title, contents: $contents) {
      _id
      number
      message
    }
  }
`;

export default function GraphqlMutationPage() {
  const [나의함수] = useMutation(나의그래프큐엘세팅);
  const onClickSubmit = async () => {
    const result = await 나의함수({
      variables: {
        // variables === $ 의 역할
        writer: "훈이",
        title: "안녕하세요",
        contents: "반갑습니다",
      },
    });
    console.log(result);
  };
  return <button onClick={onClickSubmit}>GraphQL-API 요청하기</button>;
}

 

input으로 graphql에 변수를 전달하기 

import { useMutation, gql } from "@apollo/client";
import { useState } from "react";

const 나의그래프큐엘세팅 = gql`
  mutation createBoard($writer: String, $title: String, $contents: String) {
    createBoard(writer: $writer, title: $title, contents: $contents) {
      _id
      number
      message
    }
  }
`;

export default function GraphqlMutationPage() {
  const [writer, setWriter] = useState();
  const [title, setTitle] = useState();
  const [contents, setContents] = useState();

  const [나의함수] = useMutation(나의그래프큐엘세팅);
  const onClickSubmit = async () => {
    const result = await 나의함수({
      variables: {
        // variables === $ 의 역할
        writer: writer,
        title: title,
        contents: contents,
      },
    });
    console.log(result);
  };

  const onChangeWriter = (e) => {
    setWriter(e.target.value);
  };
  const onChangeTitle = (e) => {
    setTitle(e.target.value);
  };
  const onChangeContents = (e) => {
    setContents(e.target.value);
  };

  return (
    <div>
      작성자 : <input type="text " onChange={onChangeWriter} />
      제목 : <input type="text" onChange={onChangeTitle} />
      내용 : <input type="text" onChange={onChangeContents} />
      <button onClick={onClickSubmit}>GraphQL-API 요청하기</button>;
    </div>
  );
}

 

graphql  매개변수에 에 여러 속성들이 있는 경우 

import { useMutation, gql } from "@apollo/client";

const CREATE_PRODUCT = gql`
# 변수의 타입 적는곳
  mutation createProduct(
    $seller: String
    $createProductInput: CreateProductInput!
  ) {
    # 실제 우리가 전달 할 변수 적는 곳
    createProduct(seller: $seller, createProductInput: $createProductInput) {
      
      _id
      number
      message
    }
  }
`;

export default function GraphqlMutationPage() {
  const [createProduct] = useMutation(CREATE_PRODUCT);
  const onClickSubmit = async () => {
    const result = await createProduct({
      variables: {
        seller: "훈이",
        createProductInput: {
          name: "마우스",
          detail: "정말 좋아유",
          price: 3000,
        },
      },
    });
    console.log(result);
  };
  return <button onClick={onClickSubmit}>GraphQL-API 요청하기</button>;
}