Nuxt.js Querying a GraphQL API

To get started, we need to install a few things.

Configure Apollo Client

buildModules: [
// GraphQl Apollo Client
'@nuxtjs/apollo'
],
apollo: {
clientConfigs: {
default: {
httpEndpoint: 'https://rickandmortyapi.com/graphql',
}
}
},

Querying

<script>
import gql from 'graphql-tag'

export default {
apollo: {
characters: gql`
query getCharacters {
characters {
results {
id
name
status
}
}
}
`,
},
}
</script>

Queries with arguments

├── index
│ ├── _id.vue
├── index.vue

// Copy and paste the code below inside _id.vue
<script>
import gql from 'graphql-tag'

export default {
name: 'CharacterCard',
apollo: {
// Dynamic querying
character: {
query: gql`
query getCharacter($id: ID!) {
character(id: $id) {
id
name
status
species
gender
image
origin {
name
}
}
}
`,
variables() {
return {
// if the route.params.id is null make id = 1
id: this.$route.params.id || 1,
}
},
},
},
}
</script>

--

--

--

Hi, my name is Alex. I’m a front-end engineer, passionate for the web, responsive design, & typography.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Day 33 | 100 Days Full-Stack Challenge

A quick guide to building React Native form with Formik and Yup

Frequency Counter Solving Pattern

Using Nginx as Load Balancer with Node.js (Express)

“Ok Google, how are you ?” — Testing Google Actions with Botium

Ultimate Mac JavaScript & PHP development setup.

Node.js + PostgreSQL CRUD Automation API

UI Tests for React using JEST — Project Configuration, explained (part 2)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Kasongo

Alex Kasongo

Hi, my name is Alex. I’m a front-end engineer, passionate for the web, responsive design, & typography.

More from Medium

NoSQL Databases

Introducing @mockapi/msw, mock an API server for your entities without writing any code with Mock…

An Implementation of eTOM Model as A User Account Management Database Design

Effective IT Maintenance Service Setup Plan