example: Added react-query example
ADD
examples/react-query/app.tsx
+import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+const queryClient = new QueryClient();
+
+export function rootContainer(container: any, opts: any) {
+ return React.createElement(Foo, opts, container);
+}
+
+export function innerProvider(container: any) {
+ return React.createElement(Foo, { title: 'innerProvider' }, container);
+}
+
+export function i18nProvider(container: any) {
+ return React.createElement(Foo, { title: 'i18nProvider' }, container);
+}
+
+export function dataflowProvider(container: any) {
+ return React.createElement(
+ QueryClientProvider,
+ { client: queryClient },
+ container,
+ );
+}
+
+export function outerProvider(container: any) {
+ return React.createElement(Foo, { title: 'outerProvider' }, container);
+}
+
+function Foo(props: any) {
+ return <div>{props.children}</div>;
+}

ADD
examples/react-query/favicon.png
examples/react-query/favicon.png
Binary files /dev/null and b/examples/react-query/favicon.png differ

ADD
examples/react-query/package.json
+{
+ "scripts": {
+ "build": "umi build",
+ "dev": "umi dev",
+ "start": "npm run dev"
+ },
+ "dependencies": {
+ "react-query": "^3.34.8",
+ "umi": "4.0.0-beta.16"
+ }
+}

ADD
examples/react-query/pages/index.tsx
+import React from 'react';
+import { useQuery } from 'react-query';
+import '../style.less';
+
+export default function HomePage() {
+ const { isLoading, data } = useQuery('repoData', () =>
+ fetch('https://api.github.com/repos/umijs/umi').then((res) => res.json()),
+ );
+
+ return (
+ <div className="container">
+ <div>
+ <p className="title">UmiJS x react-query</p>
+ {isLoading && <p>Loading ...</p>}
+ {data && <p>UmiJS has {data.stargazers_count} stars now!</p>}
+ </div>
+ </div>
+ );
+}

ADD
examples/react-query/readme.md
+# react-query
+
+An example of using [UmiJS](https://umijs.org/zh-CN) with [react-query](https://github.com/tannerlinsley/react-query).

ADD
examples/react-query/style.less
+body {
+ font-family: 'Lucida Sans', sans-serif;
+}
+
+.container {
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .title {
+ font-size: 64px;
+ }
+
+}

example: Added react-query example (#289)