0
168
VistasError de Sveltekit: `page` en las funciones `load` ha sido reemplazada por `url` y `params`
Estoy tratando de mostrar mi fecha de GraphCMS en mi aplicación de blog. Recibo este error cuando voy al enlace de mi publicación única (http://localhost:3000/posts/union-types-and-sortable-relations)
"
la page en funciones de load ha sido reemplazada por url y params Error: la page en funciones de load ha sido reemplazada por url y params
"
Aquí está mi código
<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>¿Puedes ayudarme? Gracias
3 Respuestas
Responde la pregunta0
Intente usar params en lugar de page: params , aunque este último todavía funciona en Sveltekit 278 (que estoy usando). Además, tengo curiosidad por saber qué te hace preferir este método a consultar GraphCMS para tu publicación individual. lo hago así:
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 } } }0
Sí, esto se cambió hace un tiempo, ahora las diferentes partes de lo que solía ser la page se pasan directamente a la función de carga:
export async function load({ fetch, page }) { const { params, url } = page } export async function load({ fetch, params, url }) { } Otra cosa a considerar es que ahora hay page endpoints , si su archivo es [slug].svelte , puede crear un archivo [slug].js y agregar lo siguiente:
export async function get({ params }) { const { slug } = params; const post = {}; // add the code to fetch from GraphCMS here return { status: 200, body: { post } } } Con esto, puede eliminar la función de load y simplificar su código (especialmente porque técnicamente ya tiene todo este código en su archivo /posts/[slug].json.js .
0
<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") } } 