docs(suspensive.org): add ErrorBoundaryGroup examples using sandpack #1002
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
CodSpeed Performance ReportMerging #1002 will create unknown performance changesComparing Summary
|
| @@ -24,7 +24,7 @@ export default function App() { | |||
| }, | |||
| }, | |||
| dependencies: { | |||
| '@tanstack/react-query': '^4.0.0', | |||
| '@tanstack/react-query': '^4', | |||
There was a problem hiding this comment.
I'm curious if all the features of Suspensive are intended for TanStack Query version 4. 🤔
Are there any features in Suspensive that only work with TanStack Query version 5?
There was a problem hiding this comment.
I'm curious if all the features of Suspensive are intended for TanStack Query version 4. 🤔
Yes! but we support @tanstack/react-query@5 too at once by @suspensive/react-query's postinstall script made by @gwansikk. Check these Pull Request out to know how automatic targeting TanStack Query work please if you need.
- feat(react-query): universal react-query for suspensive 4 and 5 #953
- feat(react-query): use commander.js to provide an improved CLI #976
When we install, @suspensive/react-query's postinstall script change target of @suspensive/react-query's dist/index.cjs like below
if @tanstack/react-query@4' is installed, @suspensive/react-query target @suspensive/react-query-4
// dist/index.js of @suspensive/react-query
import * from '@suspensive/react-query-4' // defaultif @tanstack/react-query@5' is installed, @suspensive/react-query target @suspensive/react-query-5
// dist/index.js of @suspensive/react-query
import * from '@suspensive/react-query-5' // changed by postinstall scriptAre there any features in Suspensive that only work with TanStack Query version 5?
We support interface like below with following TanStack Query's version
@suspensive/react-query with TanStack Query version 4
- useSuspenseQuery
- useSuspenseQueries
- useSuspenseInfiniteQuery
- queryOptions
- SuspenseQuery
- SuspenseQueries
- SuspenseInfiniteQuery
- QueryErrorBoundary
@suspensive/react-query with TanStack Query version 5
- SuspenseQuery
- SuspenseQueries
- SuspenseInfiniteQuery
- QueryErrorBoundary
Conclusion
In my opinion, We should provide Sandpack with TanStack Query v4 yet. but if you disagree it, suggestion also absolutely good for me! Suggest better solution if you have please.
There was a problem hiding this comment.
And if you want to get help to know how to use cli of Suspensive React Query.
After you install @suspensive/react-query, you can use npx suspensive-react-query -h or npx srq-h made by @gwansikk in this Pull Request with commander.js
There was a problem hiding this comment.
In my opinion, We should provide Sandpack with TanStack Query v4 yet. but if you disagree it, suggestion also absolutely good for me! Suggest better solution if you have please.
The features we offer that are available in @tanstack/react-query@5 can also be used in @tanstack/react-query@4!
In that case, it seems we can keep the Sandpack dependency fixed at @tanstack/react-query@4 👍
There was a problem hiding this comment.
In that case, it seems we can keep the Sandpack dependency fixed at @tanstack/react-query@4 👍
That's right~!
kangju2000
requested review from
manudeli,
okinawaa and
minsoo-web
as code owners
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1002 +/- ##
=======================================
Coverage 87.33% 87.33%
=======================================
Files 38 38
Lines 450 450
Branches 98 99 +1
=======================================
Hits 393 393
Misses 54 54
Partials 3 3
|
| <ErrorBoundaryGroup> | ||
| <fieldset style={{ border: '1px solid red', padding: '10px' }}> | ||
| <legend>Outer ErrorBoundaryGroup</legend> | ||
| <ErrorBoundaryGroup.Consumer> | ||
| {(group) => <button onClick={group.reset}>Try again</button>} | ||
| </ErrorBoundaryGroup.Consumer> | ||
| <ErrorBoundary fallback={(props) => <>{props.error.message}</>}> | ||
| <ErrorAfter2s /> | ||
| </ErrorBoundary> | ||
|
|
||
| <ErrorBoundaryGroup blockOutside> | ||
| <fieldset style={{ border: '1px solid blue', padding: '10px' }}> | ||
| <legend>Inner ErrorBoundaryGroup</legend> | ||
| <ErrorBoundaryGroup.Consumer> | ||
| {(group) => <button onClick={group.reset}>Try again</button>} | ||
| </ErrorBoundaryGroup.Consumer> | ||
| <ErrorBoundary fallback={(props) => <>{props.error.message}</>}> | ||
| <ErrorAfter2s /> | ||
| </ErrorBoundary> | ||
| </fieldset> | ||
| </ErrorBoundaryGroup> | ||
| </fieldset> | ||
| </ErrorBoundaryGroup> |
There was a problem hiding this comment.
So much better experience....!!! 🚀🚀🚀🚀🚀
…1002) # Overview <!-- A clear and concise description of what this pr is about. --> Add ErrorBoundaryGroup examples using sandpack. ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests.
…1002) # Overview <!-- A clear and concise description of what this pr is about. --> Add ErrorBoundaryGroup examples using sandpack. ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests.
…1002) # Overview <!-- A clear and concise description of what this pr is about. --> Add ErrorBoundaryGroup examples using sandpack. ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests.
…1002) # Overview <!-- A clear and concise description of what this pr is about. --> Add ErrorBoundaryGroup examples using sandpack. ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md) 2. I added documents and tests.
Overview
Add ErrorBoundaryGroup examples using sandpack.
PR Checklist