Building with SvelteKit and GraphQL Jamstack Conf 2021

Coursework for the workshop held 2021-10-07

Getting started

Goto GraphCMS.com and sign up for a new account ot log in if you have an existing account.

Scroll down to Create a new project and select blog:

Click on the + Create project button:

Name the project and select a CDN for it to reside in.

Environment variables

The sample.env file details uses the environment viarables needed, this is the GRAPHQL_ENDPOINT and the POST_TOKEN.

Copy the file to create your one one:

cp sample.env .env

Get your GraphCMS project token from Settings > API Access section:

Copy the Content API URL to the GRAPHQL_ENDPOINT variable in the .env file:

Using a mutation

To use a mutation to upload a post from the client there needs to be some changes to the blog schema to accomplish this. As the template uses RichText for the post content there and I don't want to go into detail on how to convert Markdown content from a form to RichText AST I'm going to replace the RichText field with a Markdown field.

In the project schema for the Post model I'm going to create a new Markdown Content field type.

If you're following along and want to keep the existing content you should copy this over in the Content section of the project before deleting the RichText field.

Permanent Auth Token

In the settings panel select the Permanent Auth Tokens section, + Create token, give the token a name and check Draft for the default stage. Click Create & configure permissions.

Scroll down to the Content API Permissions section and select No, I'll configure custom permissions, then + Create permission.

In the dialogue select Model All and check the Read and Create Rules, then Create.

Scroll back to the top of the page and copy the token to you clipboard and add that as the POST_TOKEN in the .env file.

Starting the dev server now go to the add-post route and create a new post!

After submitting check the GraphCMS project Post, Content section for a new Draft of the post submitted. If you want to see it in the client project select the post and change the stage from Draft to Published.