You will need several prerequisites for this tutorial:
If you have these prerequisites, let’s get started.
Since we are sending requests locally between two different ports which are considered as two separate domains we’ll need to enable Cross-Origin Resource Sharing (CORS) in the server.
First, clone the code from the GitHub repository:
git clone https://github.com/JscramblerBlog/node-express-graphql-api.git
Next, navigate to your project and install the dependencies and the cors
module:
cd node-express-graphql-api
npm install
npm install cors --save
After that, open the index.js
file and import the cors
module:
const cors = require('cors');
Then, add the cors
middleware to the Express app:
const app = express();
app.use(cors())
Finally, start the server:
node index.js
Your GraphQL server will be available from the [http://localhost:4000/](http://localhost:4000/)
address.
We need to install Vue CLI to quickly generate Vue projects and work with them. Open a new terminal and run the following command:
npm install -g @vue/cli
As of the time of this writing, @vue/cli v3.8.2 will be installed on your system.
Using Vue CLI, let’s proceed to create a Vue project. Head back to your terminal and run the following command:
vue create vue-graphql-demo
When prompted to pick a preset, you can simply select the default one.
Wait for your project to be generated and run the following commands to start the development server:
cd vue-graphql-demo
npm run serve
Your app will be running on the [http://localhost:8080/](http://localhost:8080/)
address.
Apollo is a set of utilities to help you use GraphQL in your apps. It’s well known for its client and its server. Apollo is developed and maintained by the Meteor Development Group.
Open a new terminal, navigate to your project’s folder and run the following command to install the Apollo client in your Vue project:
npm install --save vue-apollo graphql apollo-boost
Apollo Boost is a zero-config way to start using Apollo Client. It includes some common defaults, such as the recommended InMemoryCache
and HttpLink
, which come configured for you with the recommended settings. It’s suitable for starting to develop fast.
In the src/main.js
file, add the following code to create an instance of the Apollo client and connect it to our GraphQL server running at [http://localhost:4000/graphql](http://localhost:4000/graphql)
:
import ApolloClient from "apollo-boost"
import VueApollo from "vue-apollo"
const apolloClient = new ApolloClient({
uri: "http://localhost:4000/graphql"
})
Vue.use(VueApollo)
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})
We import Apollo Client from the apollo-boost
package and VueApollo
from the vue-apollo
package. Next, we create an instance of the Apollo Client and we pass in the URL of our GraphQL endpoint.
Then, we use the VueApollo
plugin to integrate Apollo with our Vue application.
Finally, we create the Apollo Provider which holds the instance of the Apollo Client that will be available to all Vue components.
All we have to do now is adding the Apollo Provider to the Vue instance using the apolloProvider
option:
new Vue({
render: h => h(App),
apolloProvider,
}).$mount('#app')
That’s it. We are now ready to use the Apollo client in our Vue app.
See the docs for more information.
After adding vue-apollo
to our app, all our components can use Apollo through the apollo
option.
First, open the src/App.vue
component and add the data()
function to the exported object with the following variables:
export default {
name: 'app',
data(){
return {
id: null,
firstName: '',
lastName: '',
email: ''}
},
We define four component variables, which are id
, firstName
, lastName
, and email
. These will be bound to the HTML form for creating a new contact.
Sending a GraphQL Query for Reading Data
Next, import gql
from the graphql-tag
package and add the apollo
object to the component with the query that we’ll be making to read the contacts from the GraphQL API:
import gql from 'graphql-tag'
export default {
name: 'app',
/* [...] */
apollo: {
contacts: gql`query {
contacts {
id,
firstName,
lastName,
email
}
}`,
},
gql
is a JavaScript template literal tag that parses GraphQL query strings into the standard GraphQL AST. Find more information from the official repository.
In the apollo
object, we added a contacts
attribute that will hold the results of the contacts
query. Later, we’ll use it to display the contacts in the template.
Sending Mutation Queries for Creating, Updating and Deleting Data
Next, add the createContact()
, updateContact()
and deleteContact()
methods as follows:
methods: {
createContact(firstName, lastName, email){
console.log(`Create contact: ${email}`)
this.$apollo.mutate({
mutation: gql`mutation createContact($firstName: String!, $lastName: String!, $email: String!){
createContact(firstName: $firstName, lastName: $lastName, email: $email) {
id,
firstName,
lastName,
email}
}`,
variables:{
firstName: firstName,
lastName: lastName,
email: email
}
}
)
location.reload();
},
updateContact(id, firstName, lastName, email){
console.log(`Update contact: # ${id}`)
this.$apollo.mutate({
mutation: gql`mutation updateContact($id: ID!, $firstName: String!, $lastName: String!, $email: String!){
updateContact(id: $id, firstName: $firstName, lastName: $lastName, email: $email)
`,
variables:{
id: id,
firstName: firstName,
lastName: lastName,
email: email
}
}
)
location.reload();
},
deleteContact(id){
console.log(`Delete contact: # ${id}`)
this.$apollo.mutate({
mutation: gql`mutation deleteContact($id: ID!){
deleteContact(id: $id)
}`,
variables:{
id: id,
}
}
)
location.reload();
},
}
In the three methods, we use the this.$apollo.mutate()
method to send mutations to the GraphQL server and we call the location.reload()
method to reload the page.
See the docs for more information about sending mutations.
Next, add the selectContact()
and clearForm()
methods in the methods
object:
selectContact(contact){
this.id = contact.id;
this.firstName = contact.firstName;
this.lastName = contact.lastName;
this.email = contact.email;
},
clearForm(){
this.id = null;
this.firstName = '';
this.lastName = '';
this.email = '';
}
These two methods will be used to select a contact from the table into the form and clear the form.
Let’s now add a table and form for displaying, creating, updating and deleting contacts. Let’s start with the HTML table:
First Name
Last Name
Email
Actions
{{ contact.firstName }}
{{ contact.lastName }}
{{ contact.email }}
We use the v-for
directive to iterate over the contacts
property of the Apollo object which holds the contacts fetched from the server. We also add two buttons for selecting and deleting the corresponding contact.
Next, let’s add the form below the table:
First Name
Last Name
Email
We created a form with three inputs that are bound to the firstName
, lastName
and email
variables declared in the component. We also added three buttons for creating a new contact, updating a selected contact and clearing the form.
This is a screenshot of the UI after adding a bunch of data:
After selecting a contact using the Select button, it will be loaded in the form and the Update button will appear instead of the Add button:
In this tutorial, we’ve learned how to use the Apollo client to consume a GraphQL API. We’ve seen how to install Apollo, how to integrate it with Vue.js and send queries and mutations to read, create, update and delete contacts from the database.
You can find the source code of this demo for this GitHub repository.
#vue-js #graphql #node-js #express #api #javascript