Application Setup

To start querying GraphQL endpoints, you need to setup a client for that endpoint. villus exposes multiple functions and components that allow you to create GraphQL clients for your endpoints.

You don’t need to create a client for each component, any of these methods makes the villus client available for all the child components. So you only need to do this once for your application.

Composition API

The useClient composition API function allows your components to define a GraphQL endpoint that all children of that component will query against.

To create a GraphQL client with the composition API:

vue<script setup>
import { useClient } from 'villus';

useClient({
  url: '/graphql', // your endpoint.
});
</script>

Internally it uses provide/inject API to inject the client into your components or composable functions. You can find the full options the useClient accepts in the API reference

Vue Plugin

You can use createClient function result as a Vue plugin that conveniently adds a villus client to your app root.

jsimport { createClient } from 'villus';
import { createApp } from 'vue';

const app = createApp({...});

// Creates a villus client instance
const client = createClient({
  url: '/graphql', // your endpoint.
});

// Makes the villus client available to your app
app.use(client);

Multiple Providers

While uncommon, there are no limitations on how many endpoints you can use within your app, you can use as many clients as you like, and that allows you to query different GraphQL APIs within the same app without hassle.

To do that you will need to create a parent component for each client:

vue<script setup>
// ComponentA
useClient({
  url: '{GITHUB_API_ENDPOINT}',
});
</script>

<script setup>
// ComponentB
useClient({
  url: '{MY_API}',
});
</script>

Next Steps

Now that you have successfully set up the GraphQL client, you can start to query and execute mutations on your GraphQL APIs.