[Web] 10편 - React(v18)와 React Native에서 GraphQL API를 가져와서 사용하는 방법

이번에 소마 프로젝트를 하게 되면서, BackEnd에서 뭔가 더 배우고 싶다는 생각이 들었다.

다른걸 시도 해볼만한게 2개 있었는데, SQL 쿼리 작성할 때 ORM을 쓰는 것과, API 단에 GraphQL을 사용하는 것이었다.

ORM을 도입하기엔 쿼리가 복잡하진 않았고, REST API 대신 GraphQL을 도입하기로 했다.

---

server단은 다른 포스팅에서 다루고, client 단만 다룰 예정이다.

처음에 npx CRA로 react 앱을 생성하고, 3가지 파일만 바꿔주면 된다.

React는 쉬운데, React Native에서 적용하려니 에러가 나서 거진 하루는 털린거 같다...

React Native에서 할때는 컴포넌트를 <Text><Text/> 같은걸로 바꿔 써야한다.

+ android, ios 각각에서 외부 api http 요청 설정 등 신경 쓸게 좀 더 있다

 

공식 docs 짱짱

https://www.apollographql.com/docs/react/

Introduction to Apollo Client

App.js와 index.js에서 설정

// App.js

import "./App.css";
import { useMutation, gql, useQuery } from "@apollo/client";

import QueryTest from "./components/QueryTest";
import MutationTest from "./components/MutationTest";
function App() {
    return (
        <div className="App">
            <h1>React + Apollo Client</h1>
            <QueryTest />
            <MutationTest />
        </div>
    );
}

export default App;

 

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import {
    ApolloClient,
    InMemoryCache,
    ApolloProvider,
    gql,
} from "@apollo/client";

const client = new ApolloClient({
    uri: "http://localhost:8000/graphql",
    cache: new InMemoryCache(),
});
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <ApolloProvider client={client}>
        <App />
    </ApolloProvider>
);

 

Query 사용법

// QueryTest.js

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

const GET_CONTINENTS = gql`
    query {
        SocialUser(SOCIAL_USER_PK: 1) {
            SOCIAL_USER_ID
            SOCIAL_USER_NICKNAME
        }
    }
`;

function QueryTest() {
    const { loading, error, data } = useQuery(GET_CONTINENTS);
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :</p>;
    return data.SocialUser.map(({ SOCIAL_USER_ID, SOCIAL_USER_NICKNAME }) => (
        <div key={SOCIAL_USER_ID}>
            <h3>{SOCIAL_USER_NICKNAME}</h3>
            <p>{SOCIAL_USER_ID}</p>
            <br />
        </div>
    ));
}

export default QueryTest;

 

Mutation 사용법

// MutationTest.js

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

const POST_MUTATION = gql`
    mutation Mutation(
        $socialUserId: Int!
        $socialUserNickname: String!
        $userLoginType: String!
    ) {
        addUser(
            SOCIAL_USER_ID: $socialUserId
            SOCIAL_USER_NICKNAME: $socialUserNickname
            USER_LOGIN_TYPE: $userLoginType
        )
    }
`;

function MutationTest() {
    const [mutateFunction, { data, loading, error }] =
        useMutation(POST_MUTATION);
    if (loading) return "Submitting...";
    if (error) return `Submission error! ${error.message}`;
    return (
        <div>
            <form
                onSubmit={(e) => {
                    e.preventDefault();
                    {
                        mutateFunction({
                            variables: {
                                socialUserId: 33333,
                                socialUserNickname: "wqeqweqw",
                                userLoginType: "KAKAO",
                            },
                        });
                    }
                }}
            >
                <button type="submit">ADD USER</button>
            </form>
        </div>
    );
}

export default MutationTest;

 

그리고 package.json 세팅 -> @꼭꼭@ proxy 설정을 해줘야 억까를 막을 수 있다.

{
    "name": "react-graphql-test",
    "version": "0.1.0",
    "private": true,
    "proxy": "http://localhost:8000",
    "dependencies": {
        "@apollo/client": "^3.6.9",
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.3.0",
        "@testing-library/user-event": "^13.5.0",
        "apollo-boost": "^0.4.9",
        "cors": "^2.8.5",
        "graphql": "^16.5.0",
        "react": "^18.2.0",
        "react-apollo": "^3.1.5",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

 

https://github.com/wq0212/react-graphql-test

GitHub - wq0212/react-graphql-test