在 Sveltekit 中通过 Prisma 获取 slug答案

【问题标题】：Fetching slug via Prisma in Sveltekit在 Sveltekit 中通过 Prisma 获取 slug
【发布时间】：2022-02-16 04:58:32
【问题描述】：

我在寻找一种通过 Sveltekit 从 prisma 获取数据/slug 的好方法时遇到了一些问题。我想我不确定如何将文章/[slug].svelte 中的 slug 传递给文章/[slug].json.ts ...

（我从 index.svelte 获取所有项目没有问题（不需要 slug），所以我知道 prisma 正在运行......）

任何帮助表示赞赏...

这就是我的代码的样子：

[slug].svelte

<script type="ts">
    import { onMount } from 'svelte';
    import { URLSearchParams } from 'url';
    let articles = [];
    onMount(async () => {
        const res = await fetch(`articles.json`);
        articles = await res.json();
        console.log(articles);
    });
</script>

<p>test</p>

[slug].json.ts

import type { RequestHandler } from '@sveltejs/kit';
import { api } from './_api_slug';

export const get: RequestHandler = async (request) => {
    const response = await api(request, request.params.slug);
    console.log(request);
    if (response.status === 404) {
        return { body: [] };
    }

    console.log('response');
    console.log(response);
    return response;
};

_api_slug.ts

import PrismaClient from '$lib/prisma';
import type { RequestEvent } from '@sveltejs/kit';
const prisma = new PrismaClient({
    log: ['query', 'info', 'warn', 'error']
});

export type Article = {
    id: string;
    name: string;
    slug: string;
    image: string;
    content: string;
};

export async function api(event: RequestEvent, resource: string, data?: Article) {
    let body = {};
    let status = 500;
    console.log('hejhej');
    console.log(resource);
    switch (event.request.method.toUpperCase()) {
        case 'GET':
            body = await prisma.article.findFirst({
                where: { slug: 'a-hardcoded-slug-since-i-cant-get-it-here' },
                include: {
                    casinos: { include: { casino: true } }
                }
            });

            status = 200;
            break;
    }

    if (
        event.request.method !== 'GET' &&
        event.request.headers.get('accept') !== 'application/json'
    ) {
        return {
            status: 303,
            headers: {
                location: '/articles'
            }
        };
    }

    return {
        status,
        body
    };
}

【问题讨论】：

标签： svelte prisma sveltekit

【解决方案1】：

使用以下方法解决：

在 [slug].svelte:

import { page } from '$app/stores';
  ...
    const res = await fetch(`articles.json?slug=${$page.params.slug}`);

在 _api_slug.ts 中：

export async function api(event: RequestEvent, resource: string, data?: Article) {
    let body = {};
    let status = 500;

    switch (event.request.method.toUpperCase()) {
        case 'GET':
            body = await prisma.article.findFirst({
                where: { slug: resource },
                include: {
                    casinos: { include: { casino: true } }
                }
            });
...

最后在 [slug].json.ts:

export const get: RequestHandler = async (request) => {
    const response = await api(request, request.url.searchParams.get('slug'));
    console.log(request.url.searchParams.get('slug'));
    if (response.status === 404) {
    ...

【讨论】：