SvelteKit x caisy

The final code of this demo is available at

• Github: https://github.com/caisy-io/caisy-example-sveltekit

• Stackblitz: https://stackblitz.com/github/caisy-io/caisy-example-sveltekit

In this example, we build on the blog article created in the quick start. If you haven't completed it yet, it is recommended to go through the first four steps of the quick start once more

To proceed, the following query should retrieve the article data using the slug of the previously created article

query allBlogArticle($slug: String) {
  allBlogArticle(where: { slug: { eq: $slug } }) {
    edges {
      node {
        text {
          json
        }
        title
        slug
        id
      }
    }
  }
}

In this example, you will need your project ID and a valid API key.

To create a new SvelteKit project, run the following command:

npm create svelte@latest caisy-example-sveltekit
cd caisy-example-sveltekit
npm install (or pnpm install, etc)
git init && git add -A && git commit -m "Initial commit" (optional)
npm run dev -- --open

To begin, we will add a link to our newly created blog on the landing page using the <a> tag

<a href="/blog/my-first-article">a link to our first blog page</a>

Note: Replace my-first-article with the slug you have set

If the development server is running, you should see a link on your index page. However, clicking the link will result in a 404 page. Let's fix this by creating a dynamic routed page that handles all of our blog pages.
To do this, create a file called +page.svelte in the path src/routes/blog/[slug]. In this file, you can add a simple "Hello World" placeholder like this:

<h1>hello world</h1>

If you visit your site with the link on the index page, you will see your "hello world" text.

You can install graphql-request by running the following command in your terminal or command prompt:

npm install graphql-request graphql --save

Create a TypeScript page file named +page.server.ts in the same directory as your page, this file will only run on the server (indicated by server in the name) to prevent leaking credentials to the client side.
The following code should be written in the file:

import { gql, GraphQLClient } from 'graphql-request';
import { CAISY_API_KEY, CAISY_PROJECT_ID } from '$env/static/private'

export async function load({ params }: { params: { slug: string } }) {
	const client = new GraphQLClient(
		`https://cloud.caisy.io/api/e/v4/${CAISY_PROJECT_ID}/graphql`,
		{
			headers: {
				'x-caisy-apikey': CAISY_API_KEY
			}
		}
	);
	const gqlResponse = await client.request(
		gql`
			query allBlogArticle($slug: String) {
				allBlogArticle(where: { slug: { eq: $slug } }) {
					edges {
						node {
							text {
								json
							}
							title
							slug
							id
						}
					}
				}
			}
		`,
		{ slug: params.slug }
	);

	return gqlResponse?.allBlogArticle?.edges?.[0]?.node;
}

This code uses GraphQL to retrieve information about a specific blog article from an external API. It utilizes an API key and project ID for access and locates the article using a specific "slug."
It returns the title and text of the located article. For proper functionality, the environment variables CAISY_API_KEY and CAISY_PROJECT_ID must be defined in a prior .env file.
If you need information on where to find this in your project, see:

The .env file may look like this:

CAISY_PROJECT_ID=54026eaa-a8fc-49f9-ac37-ebe5148c4926
CAISY_API_KEY=Q1Bi5yudIr4HxQEtVt2fmalZRyndjuDW

The query used is from the Quickstart example and can be tested in the Playground.

We've fetched the data, but the UI still displays "Hello World." To use the returned object in the Svelte template, grab it from the server-side load function. To render the rich text, we use the pre-built library @caisy/rich-text-svelte-renderer, which can be installed with a package manager like this:

npm install @caisy/rich-text-svelte-renderer --save

It can be used in the page's template file like this:

<script lang="ts">
	import { RichTextRenderer } from '@caisy/rich-text-svelte-renderer';

	export let data: { title: string; text: any };
</script>

<svelte:head>
	<title>{data.title}</title>
</svelte:head>

<section>
	<h1>{data.title}</h1>
	{#if data.text && data.text.json}
		<RichTextRenderer node={data.text.json} />
	{/if}
</section>

<style>
</style>

If you navigate to the page, you should now see the headline and full rich text of the blog article displayed on the page.

With this, you have all you need to build a blog page with caisy and Svelte. For more complex queries and topics such as preview and localization, further reading may be necessary.