(Vue+Apollo)

outside the mainstream

3 Everyone else

+

Natalia Tepluhina

Staff Frontend Engineer

Core Team Member

Google Dev Expert

Apollo Client 3

18 Sep 2020

Vue.js 3

14 Jul 2020

vue-apollo v4

v4.0.0-alpha.4

oops

vue-apollo v4

@vue/apollo-option

@vue/apollo-composable

Options API

- standard syntax for Vue 2

- uses object structure to define queries

- requires additional logic for error state

update hook -> computed

  apollo: {
    characters: {
      query: CHARACTERS_QUERY,
      update: (data) => data.characters.results,
    },
  },

update hook -> computed

  apollo: {
    characters: {
      query: CHARACTERS_QUERY,
    },
  },
  computed: {
    results() {
      return this.characters?.results;
    },
  },

Mutation loading state

methods: {
  addCharacter(char) {
    this.loading = true
    try {
      this.$apollo.mutate({
        mutation: ADD_CHARACTER,
        variables: {
          character
        }
      })
    } catch {
      this.error = true
    }
    this.loading = false
  }
}

Composition API

Mutation loading state 💙

const { mutate, loading } = useMutation(ADD_CHARACTER)

return {
  mutate,
  loading
}

Vue is mutable

Apollo cache is immutable

immer

Unit testing

import { createMockClient } from 'mock-apollo-client'
import { DefaultApolloClient } from '@vue/apollo-composable'

const createComponent = () => {
  mockClient = createMockClient()

  wrapper = shallowMount(AppComponent, {
    provide: {
      [DefaultApolloClient]: mockClient
    }
  })
}

import { createMockClient } from 'mock-apollo-client'
import { DefaultApolloClient } from '@vue/apollo-composable'
import todosQuery from '@/graphql/todos.query.gql'
import { todoQueryResponse } from './mockData'

const createComponent = () => {
  mockClient = createMockClient()
  
  mockClient.setRequestHandler(
    todosQuery,
    jest.fn().mockResolvedValue(todoQueryResponse)
  )

  wrapper = shallowMount(AppComponent, {
    provide: {
      [DefaultApolloClient]: mockClient
    }
  })
}

Thank you!