-
-
Notifications
You must be signed in to change notification settings - Fork 340
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* docs: setup solid guides config, add basic concepts to solid guides * docs: update code formatting, add form validation to solid guides * docs: add async initial values to solid guides * docs: add linked fields to solid guides, change "basic usage" section title to h2
- Loading branch information
Showing
6 changed files
with
976 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| --- | ||
| id: async-initial-values | ||
| title: Async Initial Values | ||
| --- | ||
|
|
||
| Let's say that you want to fetch some data from an API and use it as the initial value of a form. | ||
|
|
||
| While this problem sounds simple on the surface, there are hidden complexities you might not have thought of thus far. | ||
|
|
||
| For example, you might want to show a loading spinner while the data is being fetched, or you might want to handle errors gracefully. | ||
| Likewise, you could also find yourself looking for a way to cache the data so that you don't have to fetch it every time the form is rendered. | ||
|
|
||
| While we could implement many of these features from scratch, it would end up looking a lot like another project we maintain: [TanStack Query](https://tanstack.com/query). | ||
|
|
||
| As such, this guide shows you how you can mix-n-match TanStack Form with TanStack Query to achieve the desired behavior. | ||
|
|
||
| ## Basic Usage | ||
|
|
||
| ```tsx | ||
| import { createForm } from '@tanstack/solid-form'; | ||
| import { createQuery } from '@tanstack/solid-query'; | ||
|
|
||
| export default function App() { | ||
| const { data, isLoading } = createQuery(() => ({ | ||
| queryKey: ['data'], | ||
| queryFn: async () => { | ||
| await new Promise((resolve) => setTimeout(resolve, 1000)); | ||
| return { firstName: 'FirstName', lastName: 'LastName' }; | ||
| }, | ||
| })); | ||
|
|
||
| const form = createForm(() => ({ | ||
| defaultValues: { | ||
| firstName: data?.firstName ?? '', | ||
| lastName: data?.lastName ?? '', | ||
| }, | ||
| onSubmit: async ({ value }) => { | ||
| // Do something with form data | ||
| console.log(value); | ||
| }, | ||
| })); | ||
|
|
||
| if (isLoading) return <p>Loading..</p>; | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| This will show a loading spinner until the data is fetched, and then it will render the form with the fetched data as the initial values. |
Oops, something went wrong.