get-started-sanity-sveltekit's Introduction

create-svelte

Everything you need to build a Svelte project, powered by create-svelte.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

get-started-sanity-sveltekit's People

Contributors

Stargazers

Watchers

get-started-sanity-sveltekit's Issues

Documentation of Sanity.io is wrong in combination with this example

Describe the bug
data cant be fetched/correctly displayed due to syntax error

To Reproduce
Steps to reproduce the behavior:

Go to '...'
Follow tutorial by copying the exact code:

// src/routes/+page.js

import {createClient} from "@sanity/client";

const client = createClient({
  projectId: "[ your project ID ]",
  dataset: "[ your preferred dataset, eg production ]",
  apiVersion: "2021-10-21",
  useCdn: false
});```


```javascript// /src/routes/+page.js
import {createClient} from "@sanity/client";
const client = createClient({
  projectId: "[ your project ID ]",
  dataset: "production",
  apiVersion: "2021-10-21",
  useCdn: false
});
export async function load({ params }) {
  const data = await client.fetch(`*[_type == "pet"]`);

  if (data) {
    return {
      pets: data
    };
  }
  return {
    status: 500,
    body: new Error("Internal Server Error")
  };
}

<!-- /src/routes/+page.svelte -->
<script>
  export let data;
</script>``

```javascript
{#if pets && pets.length}
<ul>
  {#each pets as pet}
	<li>{pet.name}</li>
  {/each}
</ul>
{:else}
	<p>No pets found.</p>
{/if}

Expected behavior
According to docs, the fetched pets array should be displayed in html
Screenshots
not needed to replicate this error if following the tutorial exactly as described on the website

Which versions of Sanity are you using?
@sanity/cli (global) 3.19.1 (up to date)

What operating system are you using?
Linux Debian 12

Which versions of Node.js / npm are you running?
latest

Additional context

what fixed it for me was the following code snipped used as page.svelte instead:

<script>
export let data
  let pets = [
  ];
pets = data.pets
</script>

<header>
  <h1>Sanity + SvelteKit</h1>
</header>
<main>
  <h2>Pets</h2>
  {#if pets && pets.length}
  <ul>
    {#each pets as animal}
    <li>{animal.name}</li>
    {/each}
  </ul>
  {:else}
  <p>No pets to show</p>
  {/if}
  <h2>Data</h2>
  <div>
    {#if pets && pets.length}
    <pre>
    {JSON.stringify(pets, null, 2)}
    </pre>
    {:else}
    <p>Your data will show up here when you've configured everything correctly</p>
    {/if}
  </div>
</main>