{"id":26919263,"url":"https://github.com/studiolambda/turbosolid","last_synced_at":"2026-03-10T15:04:16.950Z","repository":{"id":40286549,"uuid":"470584053","full_name":"StudioLambda/TurboSolid","owner":"StudioLambda","description":"Lightweight asynchronous data management for solid","archived":false,"fork":false,"pushed_at":"2022-11-15T21:17:27.000Z","size":156,"stargazers_count":78,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-10T18:12:17.582Z","etag":null,"topics":["cache","data-fetching","javascript","solid","typescript"],"latest_commit_sha":null,"homepage":"https://erik.cat/blog/turbo-solid-docs/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StudioLambda.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-16T12:58:58.000Z","updated_at":"2024-10-09T12:40:08.000Z","dependencies_parsed_at":"2023-01-23T16:00:30.580Z","dependency_job_id":null,"html_url":"https://github.com/StudioLambda/TurboSolid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StudioLambda%2FTurboSolid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StudioLambda%2FTurboSolid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StudioLambda%2FTurboSolid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StudioLambda%2FTurboSolid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StudioLambda","download_url":"https://codeload.github.com/StudioLambda/TurboSolid/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246712989,"owners_count":20821827,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cache","data-fetching","javascript","solid","typescript"],"created_at":"2025-04-01T21:31:05.093Z","updated_at":"2026-03-10T15:04:16.897Z","avatar_url":"https://github.com/StudioLambda.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![turbo-solid](https://assets.solidjs.com/banner?project=turbo-solid)\n\n# Turbo Solid\n\n\u003e Lightweight asynchronous data management for solid\n\n## Features\n\n- Less than 3KB (gzip)\n- Same API as `createResource`.\n- Typescript support out of the box.\n- `\u003cSuspense\u003e` support.\n- On connect refetching.\n- On focus refetching.\n- Dependent fetching using a function as key.\n- Request deduping.\n- Optimistic mutation.\n- Manual refetching.\n- Automatic refetching upon key change.\n- Data synchronization (using keys).\n- Keys can throw or return false/null if data is not yet ready.\n- Additional controls like `isRefetching` or `lastFocus`.\n- Additional optional signals like `isStale` or `isAvailable`.\n- All available options from [Turbo Query](https://github.com/StudioLambda/TurboQuery).\n\n## Documentation\n\nWhile this doucment highlights some basics, it's recommended to read the [Documentation](https://erik.cat/post/turbo-solid-lightweight-asynchronous-data-management-for-solid)\n\n## Playground\n\nPlay with a few of the features at [Turbo Solid](https://turbo-solid.erik.cat)\n\n## Installation\n\n```\nnpm i turbo-solid\n```\n\n## Walk-Through\n\nTurbo Solid uses [Turbo Query](https://github.com/StudioLambda/TurboQuery) under the hood,\nand therefore it needs to be configured first. You'll need to supply a turbo query instance\nto turbo solid. You can provide this configuration by using the context API. You can also\nprovide an existing turbo query instance if you already had one created, the options will be\npassed to its query function on demand.\n\n```tsx\nimport { TurboContext } from 'turbo-solid'\n\nconst App = () =\u003e {\n  const configuration = {\n    // Available configuration options:\n    // https://erik.cat/post/turbo-solid-lightweight-asynchronous-data-management-for-solid#configuration\n  }\n\n  return (\n    \u003cTurboContext.Provide value={configuration}\u003e\n      {/* You probably want Suspense somewhere down in MyApp */}\n      {/* This is just a demo to show its support */}\n      \u003cSuspense\u003e\n        \u003cMyApp /\u003e\n      \u003c/Suspense\u003e\n    \u003c/TurboContext.Provide\u003e\n  )\n}\n```\n\nIt's also possible not to use the context API and instead rely on the global turbo query instance\nexposed on `turbo-solid`. You can therefore also configure the default instance if needed:\n\n```tsx\nimport { configure } from 'turbo-solid'\n\nconfigure({\n  // Available configuration options:\n  // https://erik.cat/post/turbo-solid-lightweight-asynchronous-data-management-for-solid#configuration\n})\n```\n\nAfter the configuration has been setup, you can already start using turbo solid. To begin using it,\nyou can import `createTurboResource` from `turbo-solid`. The API is very similar to the existing\n`createResource` from `solid-js`.\n\n```tsx\nimport { For } from 'solid-js'\nimport { createTurboResource } from 'turbo-solid'\n\ninterface ISimplePost {\n  title: string\n}\n\nconst Posts = () =\u003e {\n  const [posts] = createTurboResource\u003cISimplePost[]\u003e(\n    () =\u003e 'https://jsonplaceholder.typicode.com/posts'\n  )\n\n  return (\n    \u003cFor each={posts() ?? []}\u003e\n      \u003cdiv\u003e{post()!.title}\u003c/div\u003e\n    \u003c/For\u003e\n  )\n}\n```\n\nAwesome! 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)\n\n## Full Example (Post viewer)\n\n- Create a context with the configuration.\n\n```tsx\n// App.tsx\nimport { TurboContext, Component } from 'turbo-solid'\nimport PostSelector from './PostSelector'\nimport { render } from 'solid-js/web'\n\nconst App: Component = () =\u003e {\n  const configuration = {\n    async fetcher(key, { signal }) {\n      const response = await fetch(key, { signal })\n      if (!response.ok) throw new Error('Not a 4XX response')\n      return await response.json()\n    },\n  }\n\n  return (\n    \u003cTurboContext.Provider value={configuration}\u003e\n      \u003cPostSelector /\u003e\n    \u003c/TurboContext.Provider\u003e\n  )\n}\n\nrender(() =\u003e \u003cApp /\u003e, document.getElementById('root'))\n```\n\n- Create a post selector view to determine what post to show\n\n```tsx\n// PostSelector.tsx\nimport { Component, Show, Suspense } from 'solid-js'\nimport Post from './Post'\n\nconst PostSelector: Component = () =\u003e {\n  const [current, setCurrent] = createSignal(1)\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput\n        type=\"number\"\n        min=\"1\"\n        value={current()}\n        onInput={(e) =\u003e setCurrent(parseInt(e.currentTarget.value))}\n      /\u003e\n      \u003cSuspense fallback={\u003cdiv\u003eLoading post...\u003c/div\u003e}\u003e\n        \u003cShow when={current() !== NaN}\u003e\n          \u003cPost id={current()} /\u003e\n        \u003c/Show\u003e\n      \u003c/Suspense\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default PostSelector\n```\n\n- Create the Post component\n\n```tsx\n// Post.tsx\nimport { Component, Show, Suspense } from 'solid-js'\nimport { createTurboResource } from 'turbo-solid'\n\ninterface IPost {\n  id: number\n  userId: number\n  title: string\n  body: string\n}\n\nconst Post: Component\u003c{ id: number }\u003e = (props) =\u003e {\n  const [post, { isRefetching }] = createTurboResource\u003cIPost\u003e(\n    () =\u003e `https://jsonplaceholder.typicode.com/posts/${props.id}`\n  )\n\n  return (\n    \u003cShow when={post()}\u003e\n      \u003cdiv\u003e\n        \u003cShow when={isRefetching()}\u003e\n          \u003cdiv\u003eRefetching...\u003c/div\u003e\n        \u003c/Show\u003e\n        \u003ch1\u003e{post()!.title}\u003c/h1\u003e\n        \u003cSuspense fallback={\u003cdiv\u003eLoading published information...\u003c/div\u003e}\u003e\n          \u003cPublishedBy userId={post()!.userId} /\u003e\n        \u003c/Suspense\u003e\n        \u003cp\u003e{post()!.body}\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/Show\u003e\n  )\n}\n\nexport default Post\n```\n\n- Create the Published By component.\n\n```tsx\nimport { Component, Show } from 'solid-js'\nimport { createTurboResource } from 'turbo-solid'\n\ninterface IUser {\n  id: number\n  name: string\n}\n\nconst PublishedBy: Component\u003c{ userId: number }\u003e = (props) =\u003e {\n  const [user] = createTurboResource\u003cIUser\u003e(\n    () =\u003e `https://jsonplaceholder.typicode.com/users/${props.userId}`\n  )\n\n  return (\n    \u003cShow when={user()}\u003e\n      \u003ch4\u003ePublished by {user()!.name}\u003c/h4\u003e\n    \u003c/Show\u003e\n  )\n}\n\nexport default PublishedBy\n```\n\nYou're done!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstudiolambda%2Fturbosolid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstudiolambda%2Fturbosolid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstudiolambda%2Fturbosolid/lists"}