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

Mocking React higher-order components(HOC) with Jest

What is connect(), mapStateToProps, and mapDispatchToProps in React Redux anyways?

4 People Who Helped Me Learn About Testing in React

Reusable Navigation Bar With Drawer In Angular

Useful Npx Packages for the Developer’s Everyday Life

How to Add Internationalization in Your Next.js App

Flags all over a wall

Starting a new Vue.js Project

Reduct Storage — How to keep a history of MQTT messages in Reduct Storage

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

Low Code .. No Code and ZERO Deployment API for OBRM

SE3050 -Application Frameworks Blog

Automate Twitter actions using Node.js and deploy it on Heroku

Deploy your Nodejs + Auth0 REST API to Cyclic.sh under 4 minutes