Как передать параметры со стороны клиента в код на стороне сервера в Sveltekit?
Я пытался выполнить запрос к базе данных Supabase, для которой требуется передать породу собак, и я верну метрики об этом, порода определяется на стороне клиента. Мне удалось запустить запрос на стороне сервера, но значение не проходит.
+page.svelte
export let metrics;
export let data;
const getAllDogs = async () => {
const { metrics: data } = load({ dog: dog_val });
metrics = data;
};
onMount(async () => {
getAllDogs();
})
+page.server.js
import supabase from "../../lib/db";
//Method to get all dog breeds
export const load = async ({dog}) => {
const getAllMetrics = async () => {
try {
let { data, error } = await supabase
.from("dogs")
.select(
"avg_size, avg_obedience, avg_compassion, avg_health, avg_cleanliness, avg_energy"
)
.eq("Breed", dog);
console.info(data)
console.info(dog)
return data;
} catch (e) {
console.error(e);
}
};
return {
metrics: getAllMetrics(dog)
}
};
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я знаю, что самый простой способ сделать это — создать api в src->api->dogs->+server.js. Сделайте вызов своей базы данных в API, а затем в своем клиенте вы можете создать функцию, которая будет обращаться к вашему API и возвращать данные. Таким образом, вы также можете обновить данные, используя раскрывающийся список или что-то в этом роде, если вы не хотите обновлять страницу.
У меня это настроено при загрузке, но обычно вы, вероятно, вызывали бы эту функцию с помощью кнопки, раскрывающегося списка или какого-либо другого способа настройки породы, если вам нужно каким-то образом установить параметр «breedToSearch». Если вы отправляете породу в своем URL-адресе со своего маршрута, вы можете извлечь его из своего URL-адреса, или если вы пытаетесь установить его на странице, прежде чем перейти на эту страницу, вы можете использовать магазин, чтобы установить значение перед переходом и затем извлеките значение из хранилища при загрузке этой страницы.
Это всего лишь пример того, как вы могли бы сделать это с помощью onmount, вам решать, как вы хотите установить свой параметр, прежде чем делать вызов fetch.
+page.svelte
//set empty array for dogs if getting array
let dogs = []
//set param somehow for breedToSearch
let breedToSearch = "lab"
async function getAllDogs {
const response = await fetch('/api/dogs?dog=${breedToSearch}', {
method: 'GET',
});
let newData = await response.json();
dogs = newData.message;
onMount(async () => {
getAllDogs();
})
}
+server.js (in the src-api-dogs directory)
/** @type {import('./$types').RequestHandler} */
export async function GET({ url }) {
//get the dog param sent in the fetch call
const dog = url.searchParams.get('dog')
const dogsFromDB = -----call to database----
return new Response(JSON.stringify({ message: dogsFromDB }), { status: 200 })
}
Все это работает иначе, вы не можете просто создавать параметры
load, и эта функция не вызывается явно. Пожалуйста, прочтите документацию по загрузке данных,