[Vue] Vue Apollo GraphQL 적용 가이드

⚡ 개요

최근에 프로젝트를 하면서 신규로 적용했던 내용을 정리하려고 한다. 일단 공식 가이드 문서가 순차적으로 잘 되어있기 때문에 공식 가이드를 먼저 보는 걸 추천한다 (링크)

 

공식 가이드 문서가 잘 되어 있기때문에 설치에 대한 내용은 보고 따라 하는 게 편하다. vue cli를 통해서 라이브러리를 추가하는 방법도 존재하고, 이미 프로젝트가 존재하는 경우에도 추가하는 방법이 자세히 설명되어 있다.

 

⚡ 사용 이유

공식 가이드에 따른 장점과 내가 적용을 하면서 느낀 사용 이유에 대해서 정리를 해놓으려고 한다. 

 

📗 공식 가이드 문서 기준 사용 이유 (링크)

1. 지원 범위가 넓다.

React를 기준으로 가이드가 작성되어 있지만 다른 FrontEnd 프레임 워크를 지원 하고 있다.

 

2. HTTP 네트워크 통신

아마 대부분은 Front에서 BackEnd에 요청을 할때, AJAX, fetch, axios 등 선택적인 방법을 통해서 통신을 하게 된다. 이걸 apollo에서 대신해준다고 생각하면 된다. (아래 이미지 참조) ApolloClient를 생성하고 연결을 하고서 쿼리 및 뮤테이션을 호출하면 따로 통신에 대한 설정을 할 필요가 없어진다.

 

해당 부분은 구현을 하면서 편하다고 생각했던 부분이다. 기존 앞단에서 Graphql을 호출하기 위해서 axios를 통해서 클라이언트를 공통으로 설정하고 호출하는 방식으로 사용했지만 아래와 같이 main.js에 선언하고 상황에 맞게 호출해서 바로 바로 사용하면 된다. 단점이라고 한다면 http 통신이 어떻게 이뤄지는지를 잘 모른다면 이슈가 발생했을 때 apollo 라이브러리의 수정을 기다릴 수밖에 없게 된다.

 

3. 캐싱

클라이언트에서 데이터를 호출하게 되면 InMemoryCache에 저장을 해놨다가 동일하게 쿼리가 오는 경우에는 해당 데이터를 반환 해준다. (아래 이미지 참조)

 

1. 아래 이미지를 보면 bookID : "5" 로 보냈고, 저장된 캐싱이 없으니 서버에 요청해서 데이터를 가져와서 캐싱을 한다. 

2. 이후 다시 해당 쿼리가 왔을때 캐싱된 데이터를 리턴해준다.

before

 

위의 내용은 서버의 부하를 줄여주고, 속도가 더 빨라질 수 있는 방법이다. 공감하고 있고 좋은 내용이라고 생각을 한다.

 

BUT

데이터가 바뀌었을 경우, 이미 캐싱이 되어 있어서 이전 데이터를 가져오는 거 아닌가 그러면 잘못된 거 아닌가 생각을 했다.  이와 같은 문제가 발생한다면 캐싱이 가능한 거는 불변 데이터만 가능하다는 얘기이며, 우리는 데이터가 자주 바뀌기 때문에 장점이 그렇게 크게 나타나지는 않겠다고 생각했으며, 캐싱이 정확히 어떻게 되는 건지 내부를 분석하고 있다. 이 분석 내용은 따로 정리를 하려고 한다. (혹시 먼저 분석한 사람이 있다면 내용 공유 좀 부탁드립니다. 😅😅😅 )

 

위의 내용 말고도 많이 장점이 있으니 공식 문서를 확인해보는 게 좋다. 나도 내용을 추가적으로 확인하고, 사용해봐야지 장단점에 대해서 알 수 있을 거 같다.

 

⚡ 코드 

Spring boot + Vue3 + pinia로 개발을 하면서 적용한 코드를 기반으로 샘플 코드를 작성했다. (참고용)

 

Main.js

import { createApp, provide, h } from 'vue'
import { createPinia } from 'pinia';
import './style.css'
import '@/assets/scss/_index.scss';
import App from './App.vue'
import axios from 'axios';
import router from './router/index.js'
import 'devextreme/dist/css/dx.light.css'
import { ApolloClient, InMemoryCache } from '@apollo/client/core'
import { createApolloProvider } from '@vue/apollo-option'
import { DefaultApolloClient, provideApolloClient } from '@vue/apollo-composable';

const apolloClient = new ApolloClient({
  uri: 'http://url:port/graphql',
  // cache는 세부 설정도 가능
  cache: new InMemoryCache()
});

const apolloProvider = createApolloProvider({
  defaultClient: apolloClient,
})

provideApolloClient(apolloClient);

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient)
  },
  render() {
    return h(App)
  }
});

app.use(router);
app.config.globalProperties.$axios = axios
app.config.globalProperties.$router = router

app.use(apolloProvider)
app.use(createPinia())
app.mount('#app')

 

여기서 나는 graphql 호출 내용을 따로 분리하고, store에서 호출해서 사용하는 방법으로 구현했다. 

 

Sample.js

import {defineStore} from 'pinia'
import {useQuery} from '@vue/apollo-composable'
import gql from 'graphql-tag'
import apolloClient from "@/config/apolloClient.js";
import {LOGIN_ADMIN, SAVE_LOGIN_ADMIN} from './sampleGraphql.js'

export const sampleStore = defineStore('sample', {
    state: () => ({
        data: [],
    }),
    actions: {
        // 풀어서 호출
        testQuery(){
            console.log('test1');
            const {result, loading, error} = useQuery(gql`
                query loginAdmin($adminId: String!, $adminPass: String!, $type: companyType) {
                    loginAdmin(adminID: $adminId, adminPass: $adminPass, type: $type) {
                        adminID,
                    }
                }
            `, {
                adminId: 'test',
                adminPass: 'test',
                type: 'BASIC',
            })
            return {
                result,
                loading,
                error
            };
        },
        testQuery2: async () => {
            // query
            const result = await apolloClient.query({
                query: LOGIN_ADMIN,
                variables: {
                    adminId: 'test',
                    adminPass: 'test',
                    type: 'BASIC',
                }
            })
                // .then(result => console.log(result))
                .catch(err => console.log(err))

            console.log(result)

             mutation
             const { result2 } = await apolloClient.mutate({
                 mutation: SAVE_LOGIN_ADMIN,
                 variables: {
                     adminInfo: {
                         adminID: 'test'
                     }
                 }
             })
                 .then(res => console.log(res))
                 .catch(err => console.log(err));
            return result;

        },
        testQuery3: async () => {
            const variables = {
                adminId: 'test',
                adminPass: 'test',
                type: 'BASIC',
            }
            const { result, loading, error } = await useQuery(LOGIN_ADMIN, variables)

            console.log(result);
            console.log(loading);
            console.log(error);

            return result
        },
    },
    getters: {}
})

코드를 보면 알겠지만 조회하는 방법을 살짝만 변형해서 사용을 했으니 참고 정도만 하면 좋을 거 같다.

위의 코드처럼 작성했을 때, 코드 자동 완성 기능을 사용할 수 있어서 좋다고 생각을 했다. 스키마 기준으로 변경된 점이 존재하면 알려 준다.