[GraphQL] ApolloClient

📌 GraphQL Setting

✅ import

- ApolloClient, InMemoryCache, ApolloProvider

 

✅ new ApolloClient 

 

✅ <ApolloProvider></ApolloProvider>

 

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

export default function App({ Component, pageProps }) {
    // GraphQL Setting
    const client = new ApolloClient({
        uri: 'http://~',
        cache: new InMemoryCache(),
    });

    return (
        <ApolloProvider client={client}>
            <Component {...pageProps} />
        </ApolloProvider>
    );
}

---

📌 URI / URN / URL

✅ URI

https://deblisher.tistory.com?search='soo'#aaa 

 

✅ URL

https://deblisher.tistory.com?search='soo'

 

✅ URN

deblisher.tistory.com?search='soo'#aaa 

---

📌 GraphQL - mutation

const [실행함수] = useMutation(CREATE_BOARD)

 

✅ import

- useMutation, gql

 

✅ Mutation 세팅 / API 요청

 

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

const myGraphqlSetting = gql`
    mutation {
        createBoard(writer: "Alice", title: "Alice in Wonderland", contents: "adventure story") {
            _id
            number
            message
        }
    }
`;

export default function GraphqlMutationPage() {
    const [myGraphql] = useMutation(myGraphqlSetting);

    const onClickSubmit = async () => {
        const result = await myGraphql();
        console.log(result);
    };

    return <button onClick={onClickSubmit}>GRAPPHQL_API</button>;
}

---

📌 GraphQL - mutation arguments

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

const myGraphqlSetting = gql`
    mutation createBoard($writer: String, $title: String, $contents: String) {
        createBoard(writer: $writer, title: $title, contents: $contents) {
            _id
            number
            message
        }
    }
`;

export default function GraphqlMutationPage() {
    const [myGraphql] = useMutation(myGraphqlSetting);

    const onClickSubmit = async () => {
        const result = await myGraphql({
            variables: {
                // variables = $ 역할을 함
                writer: 'Alice',
                title: 'Alice in Wonderland',
                contents: 'adventure story',
            },
        });
        console.log(result);
    };
    return <button onClick={onClickSubmit}>GRAPPHQL_API</button>;
}

---

📌 GraphQL - mutation inputs

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

const myGraphqlSetting = 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 [cotents, setContents] = useState();

    const [myGraphql] = useMutation(myGraphqlSetting);

    const onClickSubmit = async () => {
        const result = await myGraphql({
            variables: {
                // input으로 받아온 state 값 넣기
                writer: writer,
                title: title,
                contents: cotents,
            },
        });
        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 (
        <>
            작성자 : <input type='text' onChange={onChangeWriter} />
            <br />
            제목 : <input type='text' onChange={onChangeTitle} />
            <br />
            내용 : <input type='text' onChange={onChangeContents} />
            <br />
            <button onClick={onClickSubmit}>GRAPPHQL_API</button>
        </>
    );
}

---

📌 GraphQL - mutation / Product

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: 100000,
                },
            },
        });
        console.log(result);
    };

    return <button onClick={onClickSubmit}>GRAPPHQL_API</button>;
}