DEV Community

Debbie O'Brien
Debbie O'Brien

Posted on

GraphQL and Nuxt

We need to use the graphql-tag to be able to add our query so first we import this

import gql from 'graphql-tag'
Enter fullscreen mode Exit fullscreen mode

We can then make our query listing all the data that we want to receive and ordering by what we prefer. Here we just added an export const called workshop and make it equal to our gql tag which has a query called workshops and that queries the workshops table.

export const workshops = gql`
  query workshops {
    workshops(order_by: { date: desc }) {
      date
      title
      year
    }
  }
`
Enter fullscreen mode Exit fullscreen mode

Then we need to use apollo so that we can get our data to our template. Don't forget to first install '@nuxtjs/apollo', and then add to the modules of our next config.

apollo: {
    $loadingKey: 'loading',
    workshops: {
      query: workshops,
    },
  },
Enter fullscreen mode Exit fullscreen mode

And now we can do a v-for over all our data and print the title for example

<div v-for="(workshop, index) in workshops" :key="index" class="flex">
  <p>{{workshop.title}}</p>
</div>  
Enter fullscreen mode Exit fullscreen mode

Top comments (7)

Collapse
 
afflexux profile image
afflexux

Thanks Debbie, I've just built my (as yet fairly sparse) blog out with Nuxt and Cockpit CMS.

Cockpit has a GraphQL plugin, think I'll have a go at incorporating it when I get a chance.

Collapse
 
bastianhilton profile image
Sebastian hilton

i'm working on adding cockpit to my tech stack, any luck with getting it going so far with Nuxtjs?

Collapse
 
afflexux profile image
afflexux

Yeah it works a treat.

I mostly followed this:
willbrowning.me/building-a-static-...

If you need any help give me a shout, I could probably make my final repo public once I’ve double checked I’ve properly stashed away all my keys!

Collapse
 
knth profile image
KNTH

Hi Debbie,

I am using GraphQL with Nuxt and Apollo using apollo-composable (instead of @nuxtjs/apollo) and it's very nice.

As of lack of documentation, I struggle with knowing exactly how to proceed to implement a good testing suit using Apollo cache instead of Vuex. If you had any resources to share it'd be helpful πŸ™

Thanks for your daily writing.

Collapse
 
debs_obrien profile image
Debbie O'Brien

emm, not sure I have come across any but will be doing some more work on this in the future.

Collapse
 
manuelehrenfeld profile image
Manuel Ehrenfeld

Hi Debbie,
is it possible to use GraphQL queries without the @nuxtjs/apollo module? if so, Is there any documentation on how to implement it? in my case I'm using the @nuxt/strapi module.
Thanks!

Collapse
 
debs_obrien profile image
Debbie O'Brien

there is. I created a plugin but haven't finished writing the blog post. Really should write and publish it but yes a simple plugin is possible