Set Up the Apollo Client in a Vue 3 Project
Before we start on the Vue-specific Apollo integration, we can set up the core of Apollo Client.
In this lesson, we'll create a new ApolloClient configured with an in-memory cache and HTTP link to your application's GraphQL endpoint.
Instructor: [0:00] The first thing we want to do is get Vue Apollo set up in our project. We'll open up our terminal and we'll install some dependencies, so npm install. We're going to install graphql, graphql-tag, which helps to format our queries and mutations, and we're going to install Apollo Client. Cool.
[0:16] In our main.js file, we're going to import some things from our @apollo/client/core, import from '@apollo/client/core'.
[0:26] What we're going to import is ApolloClient. We're going to create createHttpLink, which is going to let us create a link that we can pass into ApolloClient, that's based on a HTTP protocol, InMemoryCache, which we're going to use to create an in-memory cache, and gql, which is going to help to format our GraphQL queries and mutations.
[0:50] We need to do a little bit of work to configure here. The first thing we want to do is to create a HTTP link. To do that, we use the createHttpLink that we imported from our @apollo/client/core, which takes an options object, for which we use a uri. For us, we're going to have our localhost:3000/graphql.
[1:11] The next thing we want is to define our cache. Our cache is going to be a new InMemoryCache. Lastly, we'll define our client. We'll create a default client, which is going to be a new ApolloClient, which takes an options object a link, which is going to be our HTTP link, which we defined above, and our cache, which we defined above as well.
[1:35] Our GraphQL client is now ready to receive queries and deliver data back to our frontend. To test that this is working, we're going to carry out a quick query and test it. Back in GraphiQL, I'm going to create a query which is going to get my crafts. From my crafts, I'm going to get my edges. From my edges, I'm going to get my name.
[1:59] This is the query I want to carry out. I'll be able to get some of my crafts back again. Let's bring this query with us and create a new query. Const query = gql, and a template literal, and then the query that we've just created, back in our GraphiQL.
[2:15] Lastly then, we want to tell our default client to query. We'll pass our query into our options object, which is a promise. Once that promise has resolved, we want to take the data and console.log the data.
[2:31] If we go to our frontend, we can see in our terminal, we have an object. In that object, we've got some data. That data is the craft results, which got 20 crafts that we saw back on our GraphiQL.
[2:43] Now we have got GraphQL to query data inside of our Vue application. How we've done it is not ideal. Let's try to tidy that up next.