GraphQL

sql과 마찬가지로 DB에서 데이터를 가져오는 쿼리 언어
sql은 DB에 저장된 데이터를 효율적으로 가져오는것이 목적이고
gql은 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오는것이 목적

sql은 백엔드에서 작성, 호출하고
gql은 클라이언트 시스템에서 작성, 호출함

예시

sql

SELECT plot_id, species_id, sex, weight, ROUND(weight / 1000.0, 2) FROM surveys;

gql

{
  hero {
    name
    friends {
      name
    }
  }
}

그림처럼 gql을 사용하면 여러번 네트워크 호출을 할 필요가 없이 한번에 처리가 가능함.

GQL의 구조

쿼리 / 뮤테이션(query / mutation)

쿼리문( 좌측 ) / 응답 데이터 ( 우측 )

예문 만들어 보기

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

const 나의그래프큐엘셋팅 = gql`
mutation {
    createGraphql(writer: "철수", title: "안녕하세요", contents: "반갑습니다") {
        message
    }
}
`
export default function GraphqlMutationPage (){
    const [나의함수] = useMutation(나의그래프큐엘셋팅)
    const onClickSubmit = async () => {
        try{
            const result = await 나의함수()
            console.log(result);
        }catch (error){
            console.error("Error",error);
        }
    };
    return <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button>
}

응답 형식은 프론트와 백엔드에서 설정 가능

이번엔 값을 변수로 넣어보자

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

const 나의그래프큐엘셋팅 = gql`
  mutation createGraphql($writer: String!, $title: String!, $contents: String!) {
    createGraphql(writer: $writer, title: $title, contents: $contents) {
      message
    }
  }
`;

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

응답은 역시 동일하게 나오고

DB에 훈이가 추가되었다.

마지막으로 변수값을 input을 사용해서 받아서 사용해보자

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

const 나의그래프큐엘셋팅 = gql`
    mutation createGraphql($writer: String, $title: String, $contents: String){
        createGraphql(writer: $writer, title: $title, contents: $contents){
            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: {
                writer: writer,
                title: title,
                contents: contents
            }
        })
        console.log(result)
    }
    const onChangeWriter = (event) => {
        setWriter(event.target.value)
    }
    const onChangeTitle = (event) => {
        setTitle(event.target.value)
    }
    const onChangeContents = (event) => {
        setContents(event.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>
    )
}

원하는 값을 입력하고 보내면

정상적으로 넘어간 모습