SvelteKit fetch with SanityClient without losing credentials

Great question! The short answer is: no, you won't lose your credentials by passing SvelteKit's fetch to the Sanity client, but there's a better approach that's recommended.

When you do sanity.fetch = fetch or use SvelteKit's fetch directly with the Sanity client, you're actually enhancing the functionality rather than breaking it. SvelteKit's special fetch implementation (available in load functions) provides benefits like:

• Automatic cookie forwarding
• Request deduplication during SSR
• Proper tracking of dependencies

Your Sanity credentials (API tokens, project ID, dataset) are typically passed through headers or configuration options, not embedded in the fetch function itself. So swapping the fetch implementation won't strip those credentials away.

The Recommended Pattern

However, based on Sanity's documentation, the better approach is to create a SvelteKit endpoint that wraps your Sanity client calls. Here's why:

1. Security: Load functions run on both client and server. If you're using authenticated/credentialed requests (like with a read token for private data), you don't want those credentials exposed to the client
2. Better architecture: Keeps your API tokens server-side only
3. Cleaner code: With modern SvelteKit, you can use the endpoint pattern where files like +page.server.js automatically provide data to their corresponding +page.svelte

Implementation Example

Instead of using the Sanity client directly in your load function:

// +page.server.js
import { client } from '$lib/sanity'

export async function load({ fetch }) {
  // This works but exposes credentials if you're using tokens
  const data = await client.fetch(query)
  return { data }
}

Create an endpoint and use SvelteKit's fetch:

// +page.server.js
export async function load({ fetch }) {
  const response = await fetch('/api/content')
  const data = await response.json()
  return { data }
}

// routes/api/content/+server.js
import { client } from '$lib/sanity'
import { json } from '@sveltejs/kit'

export async function GET() {
  const data = await client.fetch(query)
  return json(data)
}

With newer SvelteKit versions, if your endpoint has the same filename as your page (minus the extension), the page automatically gets props from the endpoint without you needing to explicitly fetch.

When Direct Usage is Fine

If you're only querying public data (no read tokens, using the public API), then directly passing SvelteKit's fetch to your Sanity client is perfectly safe:

import { createClient } from '@sanity/client'

export async function load({ fetch }) {
  const client = createClient({
    projectId: 'your-project',
    dataset: 'production',
    apiVersion: '2023-05-03',
    useCdn: true,
    fetch // SvelteKit's fetch
  })
  
  const data = await client.fetch(query)
  return { data }
}

Your credentials (project ID, dataset) are still intact—you're just giving the client a different fetch implementation to use under the hood.