/
App.jsx
148 lines (129 loc) · 4.81 KB
/
App.jsx
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
import React from 'react';
// not sure we need the below
// import './StyleSheets/App.scss';
// import {
// Tab, Tabs, TabList, TabPanel,
// } from 'react-tabs';
// not sure we need the below
// import 'react-tabs/style/react-tabs.css';
import { RestLink } from 'apollo-link-rest';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloProvider } from 'react-apollo';
import { onError } from 'apollo-link-error';
import { ApolloLink } from 'apollo-link';
// import { createHttpLink } from 'apollo-link-http';
import Header from './Components/Header';
// history display now rendered inside Tabs Manager
// import HistoryDisplay from './Components/HistoryDisplay';
import TabsManager from './Containers/TabsManager';
// import DeleteButton from './Components/MiniComponents/TabsDeleteButton';
// import QueriesContainer from './Containers/QueriesContainer';
import { StateProvider, useStateValue } from './Context';
import * as errorResponse from './Constants/errors/errorResponseStrings';
// import * as errorDispatchObj from './Constants/errors/errorDispatchObjects';
// using a proxy to get around CORS. We do not need a server.
const proxy = Number(process.env.IS_DEV) === 1 ? 'https://cors-anywhere.herokuapp.com/' : '';
const App = () => {
const [{ endpoint, apiKey, headersKey }] = useStateValue();
// instantiated errorLink
// const httpLink = createHttpLink({ uri: proxy + endpoint });
const headersOptions = {
'Content-Type': 'application/json'
// 'Access-Control-Allow-Origin': '*',
};
if (apiKey !== '' && headersKey !== '') {
// console.log('apiKey: ', apiKey);
// console.log('headersKey: ', headersKey);
headersOptions[headersKey] = apiKey;
// console.log('headersOptions ', headersOptions);
}
const restLink = new RestLink({
// might be able to use custom fetch here for error checking?
uri: proxy + endpoint,
fetchOptions: {
mode: 'no-cors'
},
headers: headersOptions,
// onError: ({ networkError, graphQLErrors }) => {
// console.log('graphQLErrors', graphQLErrors);
// console.log('networkError', networkError);
// },
customFetch: (uri, fetchOptions) =>
// console.log('in custom fetch. fetchOptions: ', fetchOptions);
new Promise((resolve, reject) => {
fetch(uri, fetchOptions)
.then(res => {
// const clone = res.clone();
// console.log('in first then lock, custom fetch: ', res);
if (res.status === 404) {
// dispatch inside of here seems to break it
// dispatch(errorDispatchObj.endpointPath404Error);
reject(new Error(errorResponse.endpointPath404Error));
}
// console.log('clone.json: ', clone.json());
else return resolve(res);
})
// .then((data) => {
// console.log('data in 2nd then block: ', data);
// return resolve(data);
// })
.catch(e => {
// console.log('error in custom fetch');
reject('error in custom fetch: ', e);
});
})
// credentials: 'include',
});
// error link, which isn't actually being triggered at all
const errorLink = onError(({ graphQLErrors, networkError, operation, response, forward }) => {
// operation and response are other props in the onError obj
// console.log('operation in errorLink: ', operation);
// console.log('response in errorLink: ', response);
if (graphQLErrors) {
graphQLErrors.map(({ message, locations, path }) =>
console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`)
);
}
if (networkError) console.log('Network Error: ', networkError);
// forward(operation);
});
// const httpLink = createHttpLink(proxy + endpoint);
const client = new ApolloClient({
// added errorLink here
link: ApolloLink.from([errorLink, restLink]),
cache: new InMemoryCache()
// fetchPolicy: 'cache-first',
// handling errors on default
// defaultOptions: {
// watchQuery: {
// fetchPolicy: 'cache-and-network',
// errorPolicy: 'all',
// },
// query: {
// fetchPolicy: 'cache-and-network',
// errorPolicy: 'all',
// },
// },
// onError: ({ networkError, graphQLErrors }) => {
// console.log('graphQLErrors', graphQLErrors);
// console.log('networkError', networkError);
// },
});
// history display moved to render inside of TabsManager
// QC instances render inside tabs manager
return (
<section id="app">
<ApolloProvider client={client}>
<Header />
<TabsManager />
</ApolloProvider>
</section>
);
};
const statefulApp = () => (
<StateProvider>
<App />
</StateProvider>
);
export default statefulApp;