#Displaying Single Content Types from Strapi to a Page in Astro

9 messages · Page 1 of 1 (latest)

hushed cairn
#

I have a Single Content type from Strapi CMS that I want to display on a page but for whatever reason it will not load correctly.

tame fjordBOT
#

Hi @hushed cairn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To display single content types from Strapi CMS on an Astro page, you need to fetch the data from Strapi and then render it on your Astro page. Here's a general guide based on the information provided in the extracts:

  1. Fetch the Data: You need to make an API call to fetch your data from Strapi. You can use the fetchApi function for this. Here's an example of how to do this:
---import fetchApi from '../lib/strapi';
import type Article from '../interfaces/article';

const article = await fetchApi<Article>({
  endpoint: 'articles', // the content type to fetch
  wrappedByKey: 'data', // the key to unwrap the response
});---

In this example, the API call requests data from <http://localhost:1337/api/articles> and returns article: a JSON object representing your data.

  1. Display the Data: Once you have fetched the data, you can display it on your Astro page. Here's an example of how to do this:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{article.attributes.title}</title>
  </head>
  <body>
    <main>
      <h1>{article.attributes.title}</h1>
      <p>{article.attributes.content}</p>
    </main>
  </body>
</html>

In this example, the title and content of the article are displayed on the page.

Please note that you need to replace 'articles' with the endpoint for your specific content type, and Article with the interface for your specific content type.

If your content is not loading correctly, there could be several reasons for this. It could be due to an error in your code, a problem with your Strapi server, or a problem with your Astro setup. You might find it helpful to check the console for any error messages.

#

@hushed cairn kapa.ai is still learning and improving, please let us know how it did by reacting below

hushed cairn
#

@tame fjord The single content type is called BusinesCenter with the API id: business-center. How do I display this?

tame fjordBOT
#

Let me check the knowledge base for you. One moment! :books:

#

To display the BusinessCenter single content type from Strapi CMS on an Astro page, you need to fetch the data from Strapi and then render it on your Astro page. Here's a guide based on the information provided in the extracts:

  1. Fetch the Data: You need to make an API call to fetch your data from Strapi. You can use the fetchApi function for this. Here's an example of how to do this:
---import fetchApi from '../lib/strapi';
import type BusinessCenter from '../interfaces/business-center';

const businessCenter = await fetchApi<BusinessCenter>({{
  endpoint: 'business-center', // the content type to fetch
  wrappedByKey: 'data', // the key to unwrap the response
}});---

In this example, the API call requests data from <http://localhost:1337/api/business-center> and returns businessCenter: a JSON object representing your data.

  1. Display the Data: Once you have fetched the data, you can display it on your Astro page. Here's an example of how to do this:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{{businessCenter.attributes.title}}</title>
  </head>
  <body>
    <main>
      <h1>{{businessCenter.attributes.title}}</h1>
      <p>{{businessCenter.attributes.description}}</p>
    </main>
  </body>
</html>

In this example, the title and description of the business center are displayed on the page.

Please note that you need to replace 'business-center' with the endpoint for your specific content type, and BusinessCenter with the interface for your specific content type.

If your content is not loading correctly, there could be several reasons for this. It could be due to an error in your code, a problem with your Strapi server, or a problem with your Astro setup. You might find it helpful to check the console for any error messages.