Having trouble getting ghost cms api working in sveltekit with typescript eneabled

[NafunaAfrica]

Hi there.

So I have a sveltekit app running my site. I have a ghost cms installed on a separate server and would like to get the content into my sveltekit. I am having trouble as the code
import GhostContentAPI from '@tryghost/content-api'; throws up red error lines under the @TryGhost. The blog doesn't show up.

I am using this code to test:

<script context='module' lang="ts">
  
import { GhostContentAPI } from '@tryghost/content-api';


const GHOST_URL = 'http://blog.nafuna.tv';
const GHOST_KEY = '87f6096411ae42f96df2615620';
const GHOST_VERSION = 'v5';

export async function load() {
  const api = GhostContentAPI({
      url: GHOST_URL,
      key: GHOST_KEY,
      version: GHOST_VERSION})
  const postsJson = await api.posts.browse({limit: 5, include: 'tags,authors'});

  return {
    props: {
      postsJson: postsJson
    }
  }
}


</script>

<script lang="ts">
    import type { PageData } from './$types';
    export let postsJson; 
    console.log(postsJson.title);
    export let data: PageData;
</script>


<div class="hero bg-base-200 p-5">
    <div class="hero-content text-center">
      <div class="max-w-md">
        <h1 class="text-5xl font-bold">Coming Soon</h1>
        <p class="py-6">We're working on this section and it will be live in the next few weeks!</p>
        <a href="/agency" class="btn btn-primary">Back to Agency</a>
      </div>
    </div>
  </div>

  {#each postsJson as post}
  <h1> {post.title} </h1>
  <h3> {post.excerpt} </h3>
{/each}

not sure what I am missing. A lot of the code I got from the ghost docs

[eltigerchino]

Hi Nafuna,

The code example from the ghost docs is using an outdated convention of loading data from Svelte's beta days.
Declaring the load function in the svelte file is no longer supported.

You'll have to utilise a +page.server.ts file to load your data into a +page.svelte page file as explained in the link below.
https://kit.svelte.dev/docs/load

The solution should look something like the two file examples below:

// src/routes/+page.server.ts
import { GhostContentAPI } from '@tryghost/content-api';

const GHOST_URL = 'http://blog.nafuna.tv';
const GHOST_KEY = '87f6096411ae42f96df2615620';
const GHOST_VERSION = 'v5';

export async function load() {
  const api = GhostContentAPI({
      url: GHOST_URL,
      key: GHOST_KEY,
      version: GHOST_VERSION})
  const postsJson = await api.posts.browse({limit: 5, include: 'tags,authors'});

  return {
    postsJson
  }
}

<script lang="ts">
  // src/routes/+page.svelte
  import type { PageData } from './$types';

  export let data: PageData;
</script>

{#each data.postsJson as post}
  <h1> {post.title} </h1>
  <h3> {post.excerpt} </h3>
{/each}

Let me know if this helps!

[NafunaAfrica]

Hi there!!!

Thank you so much for taking the time to respond. So I have tried your method but I still get an error 500. I copy pasted your first code into a server.ts file and updated the main page.svelte file and still throws up an error 500. I am attaching screenshot:

[NafunaAfrica]

Here is the current code

[theSalted]

Thank you for this!! Helped me a ton!

[NafunaAfrica]

Got the data in by adjusting the import of the SDK. The stuff is showing up. My next thing Is to understand how sveltekit would display the full page if I am to make each blog post a link so that is shows the bigger blog post:

[NafunaAfrica]

This is the chrome console log too

[eltigerchino]

I've created an example here for you
https://stackblitz.com/edit/sveltejs-kit-template-default-ib71fy?file=src/routes/post/[id]/+page.server.js
Let me know if it helps!

[NafunaAfrica]

Hello, I tried some of the statements on the side of the page.svelte and still get error 500. So the error is coming from how the server.ts sends post. The error in vs code is: Property 'post' does not exist on type 'PageData'.ts(2339) when I hover over posi in the $: ({ post } = data);

[eltigerchino]

I believe your issue lies with how the data is being returned in the load function in +page.server.ts.
Be sure that you're not wrapping the return value with props.

return {
-   props: { post }
+  { post }
}

[NafunaAfrica]

you have been an absolute Godsend! Its now working! the console is still throwing up errors but we are somewhere! Thank you so much! Now I will experiment with other feature later like pulling in only one post or filtering posts by tags! Awesome! This has me started!