From 083d8817ebe5f46e6b5d9e2d80369361c12e9b02 Mon Sep 17 00:00:00 2001 From: Muhammad Date: Thu, 5 Sep 2024 11:25:26 +0700 Subject: [PATCH 1/2] docs: fix typo --- CONTRIBUTING.md | 5 ++--- packages/vike-solid-query/README.md | 29 +++++++++++++++++------------ 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6dfec9c..2269bd7 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -8,17 +8,16 @@ Build `vike-solid`: git clone https://github.com/vikejs/vike-solid.git cd vike-solid/ && pnpm install pnpm build -cd ../ ``` ## Validating ### Running the examples -You can then test your modifications against an example, e.g. `examples/basic/`: +You can then test your modifications against an example, e.g. `examples/full/`: ```bash -cd examples/basic/ +cd examples/full/ pnpm dev cd ../../ ``` diff --git a/packages/vike-solid-query/README.md b/packages/vike-solid-query/README.md index 1226999..a694ec0 100644 --- a/packages/vike-solid-query/README.md +++ b/packages/vike-solid-query/README.md @@ -20,6 +20,7 @@ Enables your Solid components to fetch data using [TanStack Query](https://tanst 1. `npm install @tanstack/solid-query vike-solid-query` 2. Extend `+config.js`: + ```js // pages/+config.js @@ -36,7 +37,7 @@ Enables your Solid components to fetch data using [TanStack Query](https://tanst ## Basic usage -```jsx +```tsx import { createQuery } from "@tanstack/solid-query"; import { Suspense } from "solid-js"; @@ -58,29 +59,33 @@ const Movie = (props: { id }) => { ## `QueryBoundary` -```jsx -// Define loading fallback +```tsx +// Define the loading fallback {(data) =>
{data.something}
} -// Define loading and error fallback +// Define the loading and error fallback {(data) =>
{data.something}
} -// Define loading, error and not found fallback +// Define the loading, error and not found fallback {(data) =>
{data.something}
} ``` -> [!NOTE] Types -> `query: CreateQueryResult;` -> `loadingFallback?: JSX.Element;` -> `notFoundFallback?: JSX.Element;` -> `errorFallback?: JSX.Element | ((err: any, reset: () => void) => JSX.Element);` -> `children: (data: Exclude) => JSX.Element;` +**Types :** +```js +query: CreateQueryResult; +loadingFallback?: JSX.Element; +notFoundFallback?: JSX.Element; +errorFallback?: JSX.Element | ((err: any, reset: () => void) => JSX.Element); +children: (data: Exclude) => JSX.Element; +``` ```tsx +// Movie.tsx + import { createQuery } from "@tanstack/solid-query"; import { QueryBoundary } from "vike-solid-query"; @@ -124,7 +129,7 @@ function Movie(props: { id: string }) { To set tags such as `` and `<meta name="description">` based on fetched data, you can use [`<Config>`, `<Head>`, and `useConfig()`](https://vike.dev/useConfig). -```js +```tsx import { createQuery } from "@tanstack/solid-query"; import { Config } from 'vike-solid/Config' import { Head } from 'vike-solid/Head' From 7745f852152b5046cbc604a7769416cfb0650e5c Mon Sep 17 00:00:00 2001 From: Muhammad <phonzammizaki@gmail.com> Date: Thu, 5 Sep 2024 11:26:47 +0700 Subject: [PATCH 2/2] docs: update the main readme --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5101c0a..0f951e4 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,9 @@ - Docs: [vike.dev/vike-solid](https://vike.dev/vike-solid) - Version history: [CHANGELOG.md](packages/vike-solid/CHANGELOG.md) - Source code: [packages/vike-solid/](packages/vike-solid) - +- `vike-solid-query` ([TanStack Query](https://tanstack.com/query) integration) + - Docs: [README.md](packages/vike-solid-query/README.md) + - Version history: [CHANGELOG.md](packages/vike-solid-query/CHANGELOG.md) + - Source code: [packages/vike-solid-query/](packages/vike-solid-query) > [!NOTE] > The source code is [small, simple, and highly polished](https://vike.dev/vike-solid#under-the-hood). Contributing is easy and welcome, see [CONTRIBUTING.md](CONTRIBUTING.md) to get started. \ No newline at end of file