-
Notifications
You must be signed in to change notification settings - Fork 5
/
app.js
119 lines (104 loc) · 2.85 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
// @flow
/**
* This file provided by Facebook is for non-commercial testing and evaluation
* purposes only. Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
* ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import * as React from 'react';
import {graphql} from 'relay-runtime';
import {useQuery, useRestore} from 'react-relay-offline';
import {RelayEnvironmentProvider, useRelayEnvironment} from 'relay-hooks';
import TodoApp from './components/TodoApp';
import {createEnvironment} from './relay';
const query = graphql`
query appQuery($userId: String) {
user(id: $userId) {
...TodoApp_user
totalCount
}
}
`;
const networkCacheConfig = {
ttl: 10000,
};
const AppTodo = props => {
const environment = useRelayEnvironment();
const isRehydrated = useRestore(environment);
console.log('renderer');
// ***** added to verify useRestore and fetchQuery ***
/*const [load, setLoad] = React.useState(false);
React.useEffect(() => {
Array.from({length: 10},(_,x) =>
fetchQuery(environment, graphql`
query appQuery($userId: String) {
user(id: $userId) {
...TodoApp_user
}
}
`, { userId: 'me', }, { force: true }));
fetchQuery(environment, graphql`
query appQuery($userId: String) {
user(id: $userId) {
...TodoApp_user
}
}
`, { userId: 'you', })
.then(data => {
setLoad(data);
});
}, []);
if (!load) {
return <div>Loading</div>;
}*/
const {error, data, isLçading, retry} = useQuery(
query,
{
// Mock authenticated ID that matches database
userId: 'me',
},
{
networkCacheConfig,
skip: !isRehydrated,
},
);
if (!isRehydrated) {
console.log('loading');
return <div />;
}
if (data && data.user) {
console.log('data.user.totalCount', data.user.totalCount);
return <TodoApp user={data.user} retry={retry} />;
} else if (error) {
return <div>{error.message}</div>;
}
return (
<button onClick={retry} className="refetch">
Retry
</button>
);
};
const InitApp = () => {
const [env, setEnv] = React.useState(createEnvironment());
return (
<>
<RelayEnvironmentProvider environment={env}>
<AppTodo />
</RelayEnvironmentProvider>
<button
onClick={() => {
setEnv(createEnvironment());
}}
className="refetch">
New Login
</button>
</>
);
};
const App = <InitApp />;
export default App;