코드로 보는 GraqhQL 예제

React에서 graphQL 을 이용해서 데이터 통신하는 예제

 

먼저 통신할 URL 을 연결해줍니다.

 

import axios from 'axios';

const endPoint = axios.create({
    baseURL : '-------------------------',
    headers : {
        'Content-Type' : 'application/json',
    }
});

 

query 이용한 조회

getList = async() =>{
        const query = `query{
            list {
                item_list {
                    id
                    name
                }
            }
        }`;
        
        try{
            const supplierList = await endPoint.post('',{query : supplier_list_query});
            this.setState({
                supplierList : supplierList
            });
        }catch(e){
            console.log(e);
        }
    }

 

mutation 사용

variables 도 추가해야한다.

 

    addProduct = async() =>{
        const supplier = 11
        const name = 123
        const price = 5000
        const createProduct_query = `mutation($supplier:ID!, $name:String!, $price: Int!){
            createProduct(input:{supplier_id:$supplier,name_ko:$name,price:$price}){
                id
                name_ko
                price
            }
        }`;
        try{
            await endPoint.post('',{
                query : createProduct_query,
                variables : { supplier, name, price }
            });
        }catch(e){
            console.log(e);
        }
    }