CODEWITHSUNDEEP
javascriptsveltekit
Emrah Gnl
Emrah Gnl

Reputation: 83

Sveltekit Error: `page` in `load` functions has been replaced by `url` and `params`

I am trying to display my date from GraphCMS in my blog application. I receive this error when I go to my single post link (http://localhost:3000/posts/union-types-and-sortable-relations)

"

page in load functions has been replaced by url and params Error: page in load functions has been replaced by url and params

"

Here is my code

<script context='module'>
    export const load = async ({fetch, page: {params}}) => {
        const {slug} = params
        const res = await fetch(`/posts/${slug}.json`)
        if(res.ok) {
            const {post} = await res.json()
            return {
                props: {post},
            }
        }
    }
</script>

<script>
    export let post
</script>


<svelte:head>
    <title>Emrah's Blog | Welcome</title>
</svelte:head>

<pre>{JSON.stringify(post, null, 2)}</pre>

Can you please help. Thanks

Upvotes: 1

Views: 1791

Answers (3)

Sepiocop
Sepiocop

Reputation: 11

<script context='module'>
export async function load({ fetch, params}){
   
   
    let id = params.users
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
    const user = await response.json()
   
    if(response.ok){
        return  {props:{user}}
    }
    return {
        status: response.status,
        error : new Error(" sorry no user found")
    }
    }
export let user

enter image description here

Upvotes: -1

Stephane Vanraes
Stephane Vanraes

Reputation: 16411

Yes, this has been changed a while ago, now the different parts of what used to be page are passed directly into the load function:

export async function load({ fetch, page }) {
 const { params, url } = page
}

export async function load({ fetch, params, url }) {
}

Something else to consider is that now there are page endpoints, if your file is [slug].svelte you can make a file [slug].js and add the following:

export async function get({ params }) {
  const { slug } = params;
  const post = {}; // add the code to fetch from GraphCMS here
  return {
    status: 200,
    body: {
      post
    }
  }
}

With this you can remove the load function and make your code simpler (especially because you technically already have all this code in your /posts/[slug].json.js file.

Upvotes: 1

Koen
Koen

Reputation: 386

Try using params instead of page: params, though the latter still works in Sveltekit 278 (which I'm using). Besides, I'm curious to know what makes you prefer this method to querying GraphCMS for your single post. I do it like this:

import {client} from '$lib/js/graphql-client'
import {projectQuery} from '$lib/js/graphql-queries'

export const load = async ({ params }) => {
        const {slug} = params
        const variables = {slug}
        const {project} = await client.request(projectQuery, variables)

        return {
            props: {
                project
            }
        }
    }

Upvotes: 3

Related Questions