Nuxt and WPGraphQL

Sul — Sun, 19 Feb 2023 14:26:12 +0000

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

DEV Community: Sul

Nuxt and WPGraphQL