@vue/apollo-option

What is @vue/apollo-option?

@vue/apollo-option is a Vue.js integration for Apollo Client, which allows you to use GraphQL in your Vue components. It provides a set of tools and utilities to easily manage GraphQL queries, mutations, and subscriptions within Vue's Options API.

What are @vue/apollo-option's main functionalities?

GraphQL Queries

This feature allows you to perform GraphQL queries within your Vue components. The code sample demonstrates how to set up Apollo Client and use it to fetch data in a Vue component.

```javascript
import { createApp } from 'vue';
import { createApolloProvider } from '@vue/apollo-option';
import ApolloClient from 'apollo-boost';
import gql from 'graphql-tag';
import App from './App.vue';

const apolloClient = new ApolloClient({
  uri: 'https://example.com/graphql',
});

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

const app = createApp(App);
app.use(apolloProvider);
app.mount('#app');

// In a Vue component
export default {
  apollo: {
    user: {
      query: gql`
        query getUser($id: ID!) {
          user(id: $id) {
            id
            name
          }
        }
      `,
      variables() {
        return { id: this.userId };
      },
    },
  },
  data() {
    return { userId: '1' };
  },
};
```

GraphQL Mutations

This feature allows you to perform GraphQL mutations to modify data on the server. The code sample demonstrates how to define and execute a mutation to add a new user.

```javascript
import gql from 'graphql-tag';

export default {
  data() {
    return {
      newUser: {
        name: '',
      },
    };
  },
  methods: {
    async addUser() {
      const mutation = gql`
        mutation addUser($name: String!) {
          addUser(name: $name) {
            id
            name
          }
        }
      `;
      const response = await this.$apollo.mutate({
        mutation,
        variables: { name: this.newUser.name },
      });
      console.log(response.data.addUser);
    },
  },
};
```

GraphQL Subscriptions

This feature allows you to subscribe to real-time updates from the server using GraphQL subscriptions. The code sample demonstrates how to set up a subscription to listen for new messages.

```javascript
import gql from 'graphql-tag';

export default {
  apollo: {
    newMessage: {
      query: gql`
        subscription onNewMessage {
          newMessage {
            id
            content
          }
        }
      `,
      updateQuery: (previousResult, { subscriptionData }) => {
        return {
          ...previousResult,
          messages: [...previousResult.messages, subscriptionData.data.newMessage],
        };
      },
    },
  },
};
```

Other packages similar to @vue/apollo-option

vue-apollo

vue-apollo is another popular Vue.js integration for Apollo Client. It provides similar functionalities to @vue/apollo-option but is designed to work with Vue's Composition API. It offers a more modern approach to managing GraphQL operations in Vue components.

apollo-angular

apollo-angular is an Angular integration for Apollo Client. While it serves a different framework, it provides similar functionalities for managing GraphQL queries, mutations, and subscriptions within Angular components. It is a good comparison for those familiar with Angular.

react-apollo

react-apollo is a React integration for Apollo Client. It provides similar functionalities for managing GraphQL operations within React components. It is a good comparison for those familiar with React and looking for similar capabilities in Vue.

README

Apollo and GraphQL for Vue.js (Options API)

:book: Documentation for Vue 3 | for Vue 2

:pen: Contributing guide

:heart: Sponsor me!

npm i @vue/apollo-option
pnpm i @vue/apollo-option
yarn add @vue/apollo-option

Sponsors

Changelog

v4.2.0

🚀 Enhancements

• Add updateQuery to useQuery (#1552)

🩹 Fixes

• UseMutations onDone Event hook gets triggered too early (#1559)
• (@vue/apollo-option) memory leak in wrapped ssrRender (#1553)
• Reuse previous result, fix #1483 (#1569, #1483)
• ResolveClient throwing too soon, fix #1557 (#1570, #1557)

📖 Documentation

• Add github link to documentation (#1549)
• Note about continuous releases (51e09e7)

🏡 Chore

• Switch some tests to script setup (c8e5106)

🤖 CI

• Nightly releases (319f6ec)

❤️ Contributors

• Guillaume Chau (@Akryum)
• Matt Garrett [e-mail]
• Mobsean (@mobsean)
• Leonardo Santos (@syllomex)
• Alex Liu (@Mini-ghost)