How to create single content page

Questions and Answers Frontend-Vue
#1

Hello all, i have been having this issue for awhile now since using Strapi. I like strapi but this is a headache. I can query all content like posts into a page fine. But attempting to query just a single post isn’t working.

query setup would be something like

query ($id: ID!) {
post (id: $id) {
name
excerpt
image {
url
}
}
}

My setup is:
Ubuntu 18.04 on Vultr.com
Nuxtjs on Frontend with Apollo
Strapi on backend with Graphql plugin.

I’m stuck and i’ve use the nuxt and strapi templates as a resource and their setup works for them but not for me.

Any assistance is greatly appreciated.

#2

Do you get some errors? Or what’s happening?

#3

Aye yeah we need a bit more information as to what you are getting as a response to troubleshoot.

#4

This is my query:
query Characters ($id: ID!){
character (id: $id) {
name
age
alias
affiliates
abilities
description
image {
url
}
}
}

and in graphql this is my error where the results of the query should appear:
“error”: {
“errors”: [
{
“message”: “Variable “$id” of required type “ID!” was not provided.”,

#5

Well, I think the response is obvious here. You are not providing the ID of the character that you want to get. This means that your query DOES work, it just doesn’t receive the ID of the character. If you think you provided the ID, then you can console.log its value before Quering to be sure that it’s still there.

This is how your Query should be called in the frontend code:

 <Query query={CHARACTER_QUERY} id={id}> //chacater id provided

Where <Query/> is a reusable component for data fetching and CHARACTER_QUERY is your custom GQL Query that you provided above, which fetches the data for a single character by using ID.

Take a look at this article, search in page for the next Chapters:

  1. Create the Query component (creates the reusable Query component)
  2. Create the Article container (creates the container that displays data for a single Article & creates the ARTICLE_QUERY which fetches the data for that article by using only ID)
#6

i’m confused at what you mean provide the id, when i open strapi my content types like characters each have an id. Is that not the same. Here is my graphql screenshot on strapi instance/graphql

Screenshot 2020-12-30 040941
Screenshot 2020-12-30 0409411605×526 43.3 KB

#7

Screenshot 2020-12-30 041253
Screenshot 2020-12-30 0412531593×747 52.5 KB

when using the graphql console at the bottom when i use query variables and do something like id: 1 it works. but how do that translate when placing this inside my nuxt project for dynamic pages such as a single page for each character.

#8

I’ve already provided the tutorial url in the response above. Everything is explained there. I also mentioned chapters from the tutorial. Have you read them?

1 Like
#9

So for anyone that was having similar issues, here is my solution to single pages.

My setup is nuxtjs, strapi, vultr with ubuntu 18.04

Install @nuxtjs/strapi plugin for nuxtjs

In your index.vue or whereever call for multiple content like all articles like this:

export default {

  async asyncData({ $strapi }) {

    return {

      articles: await $strapi.find("articles"),

    };

  },

}

and for a single page do:

export default {

async asyncData({ $strapi, params }) {

const matchingArticles = await $strapi.find("articles", {

  slug: params.slug,

});

return {

  article: matchingArticles[0]

};

},

data() {

return {

  apiUrl: process.env.strapiBaseUri,

};

},

}

also make sure you have a slug entity using UID for your strapi content type and use article.slug as the link in your index.vue or whatever .vue file.