1. 설치
``
npm i qwik-clientresource-library
`

2. 사용방법
`
import { $, component$ } from "@builder.io/qwik";
import { server$, useNavigate, useLocation } from "@builder.io/qwik-city";
import { ClientResource } from "qwik-clientresource-library";

interface RevenueResponse {
error?: string;
code?: string;
data?: Array<{ id: number; num: number }>;
}

export const fetchServerCallData = server$(async (): Promise => {

try{
console.log("Fetching data...");
await new Promise((resolve) => setTimeout(resolve, 3 * 1000));
console.log("Data fetch completed after 3 seconds.");

return {
data: [
{ id: 1, num: 10 },
{ id: 1, num: 10 },
{ id: 1, num: 10 },
{ id: 1, num: 10 },
],
};
} catch {
throw new Error("Failed to fetch Test.");
}
});

export const fetchClientCallData = $(async () => {
try {
// DB/API 호출
const res = await fetch("http://localhost:5173/api/data");
return await res.json();
} catch (error) {
return { error: "Failed to fetch revenue" + error };
}
});

export const Index4 = component$(() => {
// 상단에 QRL 함수들 정의
const serverDataQrl = $(async () => {
const result= await fetchServerCallData(); // 직접 await (catch는 useResource$에서)
return result;
});

const clientDataQrl = $(async () => {
const result= await fetchClientCallData(); // 직접 await (catch는 useResource$에서)
return result;
});

const onResolvedServerData = $((value: any) => (


export default Index4;
`

Description

1. install
`
npm i qwik-clientresource-library
`

2. Usage
`
import { $, component$ } from "@builder.io/qwik";
import { server$, useNavigate, useLocation } from "@builder.io/qwik-city";
import { ClientResource } from "qwik-clientresource-library";

interface RevenueResponse {
error?: string;
code?: string;
data?: Array<{ id: number; num: number }>;
}

export const fetchServerCallData = server$(async (): Promise => {

try{
console.log("Fetching data...");
await new Promise((resolve) => setTimeout(resolve, 3 * 1000));
console.log("Data fetch completed after 3 seconds.");

return {
data: [
{ id: 1, num: 10 },
{ id: 1, num: 10 },
{ id: 1, num: 10 },
{ id: 1, num: 10 },
],
};
} catch {
throw new Error("Failed to fetch Test.");
}
});

export const fetchClientCallData = $(async () => {
try {
// DB/API 호출
const res = await fetch("http://localhost:5173/api/data");
return await res.json();
} catch (error) {
return { error: "Failed to fetch revenue" + error };
}
});

export const Index4 = component$(() => {
// 상단에 QRL 함수들 정의
const serverDataQrl = $(async () => {
const result= await fetchServerCallData(); // 직접 await (catch는 useResource$에서)
return result;
});

const clientDataQrl = $(async () => {
const result= await fetchClientCallData(); // 직접 await (catch는 useResource$에서)
return result;
});

const onResolvedServerData = $((value: any) => (


export default Index4;
``