DEV Community

Cover image for Nuxt and WPGraphQL
Sul
Sul

Posted on

Nuxt and WPGraphQL

#webdev #nuxt #javascript #vue

I'm at a loss. I have tried for days going in circle and I feel like I am going crazy. I should explain I am mainly a designer that lives in Figma and I have been trying to get an understanding of Vue and Nuxt and thought of updating my portfolio, so please excuse me if I should like I have no idea :P

I'm trying to pull in the contents of a WordPress headless CMS into a Nuxt3 site. I can get all of the content to show via {{ data }} but I just can't seem to show simple things like the site title or a list of the five latest posts.

https://test.cms.sulei.dev/graphql is the test GQL endpoint and seems ok from what I have tested.

I have tried various ways to pull in the data:

  • nuxt-graphql-client
  • nuxt-apollo
  • usefetch

This is an example of the index page where I have tried to just show the Site Title from WP

<template> <div id="front-page" class="prose"> <h1 class="bg-gray">Nuxt3 ❤️ GraphQL</h1> <p>{{ getHeader.siteTitle }}</p> </div> </template> <script lang="ts" setup> import { ref } from "vue"; import useQuery from "@nuxtjs/apollo"; import gql from "graphql-tag"; const siteTitle = ref(""); const siteTitleQuery = gql` query siteTitle { getHeader { siteTitle } } `; const { data } = await useAsyncQuery(siteTitleQuery); </script>
Enter fullscreen mode Exit fullscreen mode

Literally ANY guidance or a point in the right direction would be super helpful - Thank you 🤗

Sul

Top comments (2)

Collapse
 
sulcalibur profile image
Sul •

Now the next hurdle is figuring out how I list the latest 5 posts.

This is what I have at the moment but no posts are showing:

<template> <div> <h1>Latest Posts</h1> <ul> <li v-for="post in latestPosts" :key="post.id"> <h2>{{ post.title }}</h2> <p>{{ post.excerpt }}</p> <small>{{ post.date }}</small> </li> </ul> </div> </template> <script lang="ts" setup> import useQuery from "@nuxtjs/apollo"; import gql from "graphql-tag"; const latestPostsQuery = gql` query LatestPosts { posts(first: 5) { nodes { id title excerpt date } } } `; const { data } = await useAsyncQuery(latestPostsQuery); const latestPosts = data?.posts?.nodes || []; </script>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sulcalibur profile image
Sul •

Wooo managed it!! It was just a case of adding 'data' to the code: {{ data.getHeader.siteTitle }}