https://github.com/studiolambda/turbosolid
Lightweight asynchronous data management for solid
https://github.com/studiolambda/turbosolid
cache data-fetching javascript solid typescript
Last synced: 27 days ago
JSON representation
Lightweight asynchronous data management for solid
- Host: GitHub
- URL: https://github.com/studiolambda/turbosolid
- Owner: StudioLambda
- License: mit
- Created: 2022-03-16T12:58:58.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-15T21:17:27.000Z (over 2 years ago)
- Last Synced: 2025-03-10T18:12:17.582Z (about 2 months ago)
- Topics: cache, data-fetching, javascript, solid, typescript
- Language: TypeScript
- Homepage: https://erik.cat/blog/turbo-solid-docs/
- Size: 152 KB
- Stars: 78
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Turbo Solid
> Lightweight asynchronous data management for solid
## Features
- Less than 3KB (gzip)
- Same API as `createResource`.
- Typescript support out of the box.
- `` support.
- On connect refetching.
- On focus refetching.
- Dependent fetching using a function as key.
- Request deduping.
- Optimistic mutation.
- Manual refetching.
- Automatic refetching upon key change.
- Data synchronization (using keys).
- Keys can throw or return false/null if data is not yet ready.
- Additional controls like `isRefetching` or `lastFocus`.
- Additional optional signals like `isStale` or `isAvailable`.
- All available options from [Turbo Query](https://github.com/StudioLambda/TurboQuery).
## Documentation
While this doucment highlights some basics, it's recommended to read the [Documentation](https://erik.cat/post/turbo-solid-lightweight-asynchronous-data-management-for-solid)
## Playground
Play with a few of the features at [Turbo Solid](https://turbo-solid.erik.cat)
## Installation
```
npm i turbo-solid
```
## Walk-Through
Turbo Solid uses [Turbo Query](https://github.com/StudioLambda/TurboQuery) under the hood,
and therefore it needs to be configured first. You'll need to supply a turbo query instance
to turbo solid. You can provide this configuration by using the context API. You can also
provide an existing turbo query instance if you already had one created, the options will be
passed to its query function on demand.
```tsx
import { TurboContext } from 'turbo-solid'
const App = () => {
const configuration = {
// Available configuration options:
// https://erik.cat/post/turbo-solid-lightweight-asynchronous-data-management-for-solid#configuration
}
return (
{/* You probably want Suspense somewhere down in MyApp */}
{/* This is just a demo to show its support */}
)
}
```
It's also possible not to use the context API and instead rely on the global turbo query instance
exposed on `turbo-solid`. You can therefore also configure the default instance if needed:
```tsx
import { configure } from 'turbo-solid'
configure({
// Available configuration options:
// https://erik.cat/post/turbo-solid-lightweight-asynchronous-data-management-for-solid#configuration
})
```
After the configuration has been setup, you can already start using turbo solid. To begin using it,
you can import `createTurboResource` from `turbo-solid`. The API is very similar to the existing
`createResource` from `solid-js`.
```tsx
import { For } from 'solid-js'
import { createTurboResource } from 'turbo-solid'
interface ISimplePost {
title: string
}
const Posts = () => {
const [posts] = createTurboResource(
() => 'https://jsonplaceholder.typicode.com/posts'
)
return (
{post()!.title}
)
}
```
Awesome! You can learn more about what controls and features you gain over `createResource` on the [Documentation](https://erik.cat/post/turbo-solid-lightweight-asynchronous-data-management-for-solid)
## Full Example (Post viewer)
- Create a context with the configuration.
```tsx
// App.tsx
import { TurboContext, Component } from 'turbo-solid'
import PostSelector from './PostSelector'
import { render } from 'solid-js/web'
const App: Component = () => {
const configuration = {
async fetcher(key, { signal }) {
const response = await fetch(key, { signal })
if (!response.ok) throw new Error('Not a 4XX response')
return await response.json()
},
}
return (
)
}
render(() => , document.getElementById('root'))
```
- Create a post selector view to determine what post to show
```tsx
// PostSelector.tsx
import { Component, Show, Suspense } from 'solid-js'
import Post from './Post'
const PostSelector: Component = () => {
const [current, setCurrent] = createSignal(1)
return (
setCurrent(parseInt(e.currentTarget.value))}
/>
Loading post...}>
)
}
export default PostSelector
```
- Create the Post component
```tsx
// Post.tsx
import { Component, Show, Suspense } from 'solid-js'
import { createTurboResource } from 'turbo-solid'
interface IPost {
id: number
userId: number
title: string
body: string
}
const Post: Component<{ id: number }> = (props) => {
const [post, { isRefetching }] = createTurboResource(
() => `https://jsonplaceholder.typicode.com/posts/${props.id}`
)
return (
Refetching...
{post()!.title}
Loading published information...}>
{post()!.body}
)
}
export default Post
```
- Create the Published By component.
```tsx
import { Component, Show } from 'solid-js'
import { createTurboResource } from 'turbo-solid'
interface IUser {
id: number
name: string
}
const PublishedBy: Component<{ userId: number }> = (props) => {
const [user] = createTurboResource(
() => `https://jsonplaceholder.typicode.com/users/${props.userId}`
)
return (
Published by {user()!.name}
)
}
export default PublishedBy
```
You're done!