-
Notifications
You must be signed in to change notification settings - Fork 300
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add react-query demo to create app demo (#1809)
- Loading branch information
Showing
13 changed files
with
156 additions
and
11 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
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,43 @@ | ||
| // | ||
| // A more complicate demo subapp using Redux | ||
| // | ||
| // Note: using redux requires top level Redux store initialization so if another | ||
| // subapp tries to use this as a dynamic component, then it must also uses redux and | ||
| // provides the redux top level store facility. | ||
| // | ||
|
|
||
| import { React, ReactSubApp } from "@xarc/react"; | ||
| import { reactQueryFeature, useQuery } from "@xarc/react-query"; | ||
| import { demo3QueryFn } from "./react-query-fetch"; | ||
|
|
||
| const Demo3 = () => { | ||
| const { data } = useQuery("demo3", demo3QueryFn, { staleTime: 2000 }); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div | ||
| style={{ | ||
| padding: "5px", | ||
| marginTop: "15px", | ||
| border: "solid", | ||
| marginLeft: "15%", | ||
| marginRight: "15%" | ||
| }} | ||
| > | ||
| <h2>subapp demo3 with react-query</h2> | ||
| data: <pre>{JSON.stringify(data)}</pre> | ||
| </div> | ||
| <p style={{ textAlign: "center" }}>© {new Date().getFullYear()} Your (Company) name here</p> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const subapp: ReactSubApp = { | ||
| Component: Demo3, | ||
| wantFeatures: [ | ||
| reactQueryFeature({ | ||
| React, | ||
| serverModule: require.resolve("./react-query-fetch.ts") | ||
| }) | ||
| ] | ||
| }; |
22 changes: 22 additions & 0 deletions
22
packages/xarc-create-app/template/src/demo3/react-query-fetch.ts
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,22 @@ | ||
| import { dehydrate } from "@xarc/react-query"; | ||
|
|
||
| const maxDelay = 50; | ||
|
|
||
| export const demo3QueryFn = async ({ queryKey }) => { | ||
| const delay = Math.floor(Math.random() * maxDelay); | ||
|
|
||
| return new Promise(resolve => { | ||
| setTimeout(resolve, delay); | ||
| }).then(() => { | ||
| return { msg: "react-query", queryKey, delay }; | ||
| }); | ||
| }; | ||
|
|
||
| export const prefetchQuery = async ({ queryClient, ssrData }) => { | ||
| await queryClient.prefetchQuery("demo3", demo3QueryFn); | ||
|
|
||
| return { | ||
| queryClient, | ||
| dehydratedState: dehydrate(queryClient) | ||
| }; | ||
| }; |
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
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,43 @@ | ||
| // | ||
| // A more complicate demo subapp using Redux | ||
| // | ||
| // Note: using redux requires top level Redux store initialization so if another | ||
| // subapp tries to use this as a dynamic component, then it must also uses redux and | ||
| // provides the redux top level store facility. | ||
| // | ||
|
|
||
| import { React, ReactSubApp } from "@xarc/react"; | ||
| import { reactQueryFeature, useQuery } from "@xarc/react-query"; | ||
| import { demo3QueryFn } from "./react-query-fetch"; | ||
|
|
||
| const Demo3 = () => { | ||
| const { data } = useQuery("demo3", demo3QueryFn, { staleTime: 2000 }); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div | ||
| style={{ | ||
| padding: "5px", | ||
| marginTop: "15px", | ||
| border: "solid", | ||
| marginLeft: "15%", | ||
| marginRight: "15%" | ||
| }} | ||
| > | ||
| <h2>subapp demo3 with react-query</h2> | ||
| data: <pre>{JSON.stringify(data)}</pre> | ||
| </div> | ||
| <p style={{ textAlign: "center" }}>© {new Date().getFullYear()} Your (Company) name here</p> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const subapp: ReactSubApp = { | ||
| Component: Demo3, | ||
| wantFeatures: [ | ||
| reactQueryFeature({ | ||
| React, | ||
| serverModule: require.resolve("./react-query-fetch.ts") | ||
| }) | ||
| ] | ||
| }; |
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,22 @@ | ||
| import { dehydrate } from "@xarc/react-query"; | ||
|
|
||
| const maxDelay = 50; | ||
|
|
||
| export const demo3QueryFn = async ({ queryKey }) => { | ||
| const delay = Math.floor(Math.random() * maxDelay); | ||
|
|
||
| return new Promise(resolve => { | ||
| setTimeout(resolve, delay); | ||
| }).then(() => { | ||
| return { msg: "react-query", queryKey, delay }; | ||
| }); | ||
| }; | ||
|
|
||
| export const prefetchQuery = async ({ queryClient, ssrData }) => { | ||
| await queryClient.prefetchQuery("demo3", demo3QueryFn); | ||
|
|
||
| return { | ||
| queryClient, | ||
| dehydratedState: dehydrate(queryClient) | ||
| }; | ||
| }; |
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