Getting Sveltekit to display some data from Strapi via API

[NafunaAfrica]

Hello all! I do hope you will help me with this issue I am facing.

So I have a web app built on Sveltekit. Here I intend to pull data from strapi for a blog as well as other information. I have made a route called news and a nested route called posts which is my API endpoint. Here in '/news/posts' I check with Postman and the demo data I have there flows in well:

The code that did that in the +server.ts files is:

` export const GET = async ({ request }) => {

const res = await fetch('https://cms.nafuna.tv/api/blogs')
const info = await res.json()

return new Response(JSON.stringify(info), { status: 200})

}`

so now I wanted to get the data into the main +page.svelte file. I have made a +page.server.ts to load the data from the endpoint:

export async function load({ fetch }) { const res = await fetch('/news/posts') const info = await res.json() return { props: { blogs: info.data } }; }

My main issue happens when I am trying to use that in the +page.svelte whose code looks like:

`<script lang="ts">
import type { PageData } from './$types';

export let data;

</script> {#each blogs as post}

{post.Title}

{/each} ` the above won't display the posts coming from API. What am I missing? I'm pretty new to Sveltekit and have been learning Javascript for under 3 months so there maybe things that I know I missed. Here is a screenshot side by side so you can better see:

Kind regards!

[Glench]

I'm not sure but I think the error might be in +page.server.ts. Shouldn't the last line be this?

return { props: { blogs: info.data } }
// not `res.data`

[NafunaAfrica]

Hi there! Thank you for that. I have changed it to that before as I was trying and it had failed. I've tried again so I can share the errors:

[Glench]

Aha, but now shouldn't your +page.svelte code be this?

{#each data.props.blogs as post}

[NafunaAfrica]

Yes, thank you! I managed to get rid of the errors in the code as the squiggly red lines are gone BUT:

Now I get the above instead of the content I have in strapi.

[NafunaAfrica]

thats awesome! Progress but this is what I get versus the posts when I add one more into strapi it shows up, so the undefined are exactly like the posts I have on the cms

[NafunaAfrica]

Additional console logs and errors:

here is one from Chrome. I logged out 'data' on the page.svelte and I can now see the data coming in:

not sure why it wont print?

[Glench]

Nice progress!

From what you printed out with your console.log command, it looks like each post object doesn't have a post.Title as shown in your code. I can't quite see because of the ... in your screenshot but I'm guessing it's something like post.attributes.Title.

[NafunaAfrica]

And that's exactly what it was! I just needed to put the attributes in there and it printed!

I am well on my way! Thank you so much for all the help! One last aspect to this is that the images don't yet load as they came in as a string of text. How to I parse the strapi rich text into my Sveltekit app?

Also there was a featured image content item which is to have a featured image, that's not showing up somehow as well....

Thank you again for all the help! I appreciate it!

[Glench]

Yay! You're welcome. I don't know anything about Strapi but it looks like it gives you markdown-formatted text, so you'll need to find a Svelte plugin that renders markdown for you. I've actually never done this myself but I imagine it's really easy to find a library that does it for you.

[NafunaAfrica]

Hello again. Thought to pick this up from here versus making a new thread.

My main new challenge now is setting up a system where the user clicks on the blog item and then they see a bigger page with the full article. I know this is a slug system and I have made a route called: '/news/[slug]' and in there I have 2 files, a page.svelte and a page.server.ts. I copy pasted the working API call code into the new page.ts but not too sure how to bring all the data in without using a for each loop.

totally new to dynamic routes. I have shower created a slug item on the strapi side.

The new server.ts code is:
export async function load({ params, fetch }) { const res = await fetch(https://cms.nafuna.tv/api/blogs/${params.id}?populate=*`);
const info = await res.json()
return { props: { blogs: info.data.attributes } };
console.log(props);
}
`

[Glench]

Do you know how to query your API for a single post instead of all of them?

[NafunaAfrica]

Hello again @Glench!

So I have settup slug option in strapi:

It hyphenated the title but still checking how to query

[Glench]

Looks like you can use this api endpoint to query individual blog articles: https://docs.strapi.io/dev-docs/api/rest#get-an-entry

And maybe query by slug: https://forum.strapi.io/t/strapi-v4-search-by-slug-instead-id/13469/3