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>

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

Sul

Top comments (2)

Sul • Feb 19 '23

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>

Sul • Feb 19 '23

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

DEV Community

Nuxt and WPGraphQL

Top comments (2)

Read next

Setting up PHP 8.2 + Laravel 11 dev environment on Multipass

How use Renovate Bot on self-hosted GitLab

ES6 Spread Operator: Unleashing the Power of Modern JavaScript

Artificial Intelligence and Machine Learning in Web Development