vue.js – GraphQL 인자 값 넣어서 데이터 받기

vue.js 에서 입력값을 받아 해당 입력 값을 GraphQL 쿼리 인자로 넣어서 데이터를 가져오고 싶을 때가 있다.

예를들면, 영어 사전 검색을 하는데 smart, login과 같은 단어가 포함된 결과물을 얻고 싶을 때 apollo를 다음과 같이 사용하여 데이터를 가져올 수 있다.

<script>
  import gql from 'graphql-tag'
  export default {
    data () {
      return {
        searchWord: '',
     },
    apollo: {
        dictionaries: {
            query: gql`query Dictionaries($searchInput: String!) {
                dictionaries (where: { word_contains: $searchInput}) {
                    meaning
                    detail
                }
            }`,
            variables () {
                return {
                    searchInput: this.searchWord,
                }
            },
        },
    },
  }
</script>

참고

• https://apollo.vuejs.org/guide/apollo/queries.html#reactive-parameters