vue-apollo

What is vue-apollo?

vue-apollo is an integration of Apollo Client with Vue.js, allowing you to use GraphQL in your Vue applications. It provides a set of tools to manage GraphQL queries, mutations, and subscriptions, making it easier to interact with GraphQL APIs in a Vue.js environment.

What are vue-apollo's main functionalities?

Querying Data

This feature allows you to perform GraphQL queries to fetch data from a GraphQL server. The `useQuery` function is used to execute the query and manage the loading state, result, and any errors.

```javascript
import { useQuery, gql } from '@vue/apollo-composable';

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
    }
  }
`;

export default {
  setup() {
    const { result, loading, error } = useQuery(GET_USERS);
    return { result, loading, error };
  }
};
```

Mutating Data

This feature allows you to perform GraphQL mutations to modify data on a GraphQL server. The `useMutation` function is used to execute the mutation and manage the loading state, result, and any errors.

```javascript
import { useMutation, gql } from '@vue/apollo-composable';

const ADD_USER = gql`
  mutation AddUser($name: String!) {
    addUser(name: $name) {
      id
      name
    }
  }
`;

export default {
  setup() {
    const { mutate, loading, error } = useMutation(ADD_USER);
    const addUser = (name) => {
      mutate({ variables: { name } });
    };
    return { addUser, loading, error };
  }
};
```

Subscriptions

This feature allows you to subscribe to real-time updates from a GraphQL server. The `useSubscription` function is used to execute the subscription and manage the loading state, result, and any errors.

```javascript
import { useSubscription, gql } from '@vue/apollo-composable';

const USER_ADDED = gql`
  subscription OnUserAdded {
    userAdded {
      id
      name
    }
  }
`;

export default {
  setup() {
    const { result, loading, error } = useSubscription(USER_ADDED);
    return { result, loading, error };
  }
};
```

Other packages similar to vue-apollo

apollo-client

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. It can be used with any JavaScript framework or library, including React, Angular, and Vue. Compared to vue-apollo, it is more general-purpose and not specifically tailored for Vue.js.

urql

urql is a highly customizable and versatile GraphQL client for React and other frameworks. It provides a set of tools to manage GraphQL queries, mutations, and subscriptions. While it is similar to vue-apollo in functionality, it is more focused on React and does not provide the same level of integration with Vue.js.

relay

Relay is a JavaScript framework for building data-driven React applications with GraphQL. It is designed to be highly efficient and scalable, with features like data-fetching and caching. Unlike vue-apollo, Relay is specifically designed for use with React and does not support Vue.js.

README

Apollo and GraphQL for Vue.js

Documentation

Contributing guide

Sponsors

Gold

Silver

Bronze