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'

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
    }
  }
`

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,
    },
  },

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>  

Comments

[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.

[Sebastian hilton]

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

[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!

[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.

[Debbie O'Brien]

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

[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!

[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