Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: minor update docs #115

Merged
merged 2 commits into from
Sep 5, 2024
Merged

chore: minor update docs #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
083d881
docs: fix typo
phonzammi Sep 5, 2024
7745f85
docs: update the main readme
phonzammi Sep 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ../../
```
5 changes: 4 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
29 changes: 17 additions & 12 deletions packages/vike-solid-query/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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";

Expand All @@ -58,29 +59,33 @@ const Movie = (props: { id }) => {

## `QueryBoundary`

```jsx
// Define loading fallback
```tsx
// Define the loading fallback
<QueryBoundary query={query} loadingFallback={Loading}>
{(data) => <div>{data.something}</div>}
</QueryBoundary>
// Define loading and error fallback
// Define the loading and error fallback
<QueryBoundary query={query} loadingFallback={Loading} errorFallback={Error}>
{(data) => <div>{data.something}</div>}
</QueryBoundary>
// Define loading, error and not found fallback
// Define the loading, error and not found fallback
<QueryBoundary query={query} loadingFallback={Loading} errorFallback={Error} notFoundFallback={NotFound}>
{(data) => <div>{data.something}</div>}
</QueryBoundary>
```

> [!NOTE] Types
> `query: CreateQueryResult<T, Error>;`
> `loadingFallback?: JSX.Element;`
> `notFoundFallback?: JSX.Element;`
> `errorFallback?: JSX.Element | ((err: any, reset: () => void) => JSX.Element);`
> `children: (data: Exclude<T, null | false | undefined>) => JSX.Element;`
**Types :**
```js
query: CreateQueryResult<T, Error>;
loadingFallback?: JSX.Element;
notFoundFallback?: JSX.Element;
errorFallback?: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
children: (data: Exclude<T, null | false | undefined>) => JSX.Element;
```

```tsx
// Movie.tsx

import { createQuery } from "@tanstack/solid-query";
import { QueryBoundary } from "vike-solid-query";

Expand Down Expand Up @@ -124,7 +129,7 @@ function Movie(props: { id: string }) {

To set tags such as `<title>` 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'
Expand Down