Apollo - vue3에서 apollo 사용하기

목차

• Introduction
• Installation
• main.js
• webpack gql file
• apollo composable
• Conclusion
• Reference

📌 Introduction

안녕하세요. 오늘은 apollo를 vue3에 한번 적용해보는 포스팅입니다. 해당 코드는 여기서확인 가능합니다.

📌 Installation

npm install @apollo/client graphql react @vue/apollo-composable graphql-tag

여기서 왜 갑자기 react가 튀어나오나 싶으시겠지만...😭 네 react를 설치를 해줘야합니다. 크응... apollo client에 아마.. react가 있고.. 더 자세한건... 생략하겠습니다.

📌 main.js

// main.js
import { createApp, provide, h } from 'vue'
import App from './App.vue'
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { DefaultApolloClient } from '@vue/apollo-composable';
import store from './store'


const defaultClient = new ApolloClient({
  // 서버의 uri를 지정을 해주게 됩니다.
  uri: 'https://rickandmortyapi.com/graphql/',
  cache: new InMemoryCache()
});

createApp({
  setup() {
    // provide를 사용함으로써 자식 component들도 Apollo에 접근을 할 수 있습니다.
    provide(DefaultApolloClient, defaultClient);
  },
  render() {
    return h(App);
  }
}).use(store).mount('#app')

📌 webpack gql file

graphql file을 이용하기 위해서는 webpack 설정을 해줘야합니다.

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('graphql')
      .test(/\.(graphql|gql)$/)
      .use('graphql-tag/loader')
      .loader('graphql-tag/loader')
      .end();
  }
}

📌 apollo composable

apollo-composable을 이용해서 쉽게 데이터를 받아올 수 있어요. useQuery와 useReuslt를 사용하면 됩니다.

<script>
import { useQuery, useResult } from "@vue/apollo-composable";
import allCharacters from "./graphql/allCharacters.query.gql";

export default {
  name: "App",
  setup() {
    // result 뿐 아니라 loading과 error도 있어서 너무 편리해요. 더 많은 함수가 있지만 자세한건 공식 문서를 참고 해주세요.
    const { result, loading, error, refetch } = useQuery(
      allCharacters
    );
    // result를 computed로 치환 해주는 useResult 입니다. 두번 째 인자로 기본 값을 설정 할 수 있어요.
    const characters = useResult(
      result,
      null,
      (data) => data.characters.results
    );

    return {
      result,
      loading,
      error,
      refetch,
      characters,
    };
  },
};
</script>

📌 Conclusion

이렇게 한번 vue에서 apollo를 사용해봤습니다. 개인적으로 왜 자꾸 커뮤니티에서 자꾸 gql의 대단함을 찬양하는지 알 수 있는 대목들이 있네요. 너무 편리하고 좋은거 같습니다. 앞으로 개인 프로젝트는 무조건 gql을 사용할거 같아요. 좀더 사용해봐야 하겠지만 rest를 완벽하게 대체할 수 있을 거라는 생각이 드네요. 그리고 vuex를 이제 굳이 써야하는가? 라는 의문도 많이 드네요. 물론 특정한 상황에서는 vuex를 분명 사용하겠지만 대부분의 것들이 vuex를 대체 할수 있을거 같다는 생각이 드네요. 그럼 다음 포스팅에서 만나요 안녕~

📌 Reference

• Build Apps with Vue3 + apollo
• vue apollo composable