Skip to content

Commit d172c31

Browse files
devmrhdevmrh
committed
add _app
1 parent abc56b4 commit d172c31

File tree

4 files changed

+160
-84
lines changed

4 files changed

+160
-84
lines changed

‎frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"next-with-apollo": "^5.1.0",
2323
"node-fetch": "^2.6.0",
2424
"react": "^16.13.1",
25+
"react-apollo-graphql": "^1.0.2",
2526
"react-dom": "^16.13.1",
2627
"react-redux": "^7.2.1",
2728
"react-spring": "^8.0.27",

‎frontend/pages/Aapp.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import'../style.css'
2+
3+
import { ThemeProvider, createGlobalStyle } from "styled-components";
4+
5+
import { ApolloClient } from "@apollo/client";
6+
import { ApolloProvider } from "@apollo/react-hooks";
7+
import Head from "next/head";
8+
import Header from '../components/Layouts/Header';
9+
import { NormalizedCache } from "apollo-boost";
10+
import { Provider } from 'react-redux'
11+
import React from "react";
12+
import { useApollo } from '../lib/apollo'
13+
import { useStore } from '../lib/redux'
14+
import withApollo from "../hooks/withApollo";
15+
//import App from "next/app";
16+
import withRedux from 'next-redux-wrapper';
17+
import { wrapper } from '../store/store';
18+
19+
export interface IThem {
20+
niceBlack: string;
21+
}
22+
23+
export interface IThemeWrapper {
24+
theme: IThem;
25+
}
26+
27+
export const theme: IThem = {
28+
niceBlack: "#001F3F",
29+
};
30+
31+
const GlobalStyle = createGlobalStyle<IThemeWrapper>`
32+
body {
33+
margin: 0 auto;
34+
color: ${(props) => props.theme.niceBlack}
35+
}
36+
37+
.overlay {
38+
position: fixed;
39+
display: block;
40+
overflow: auto;
41+
width: 100%;
42+
height: 100%;
43+
top: 0;
44+
left: 0;
45+
right: 0;
46+
bottom: 0;
47+
background-color: rgba(0,0,0,0.5);
48+
z-index: 999;
49+
cursor: pointer;
50+
}
51+
52+
.content {
53+
margin: 15% auto;
54+
background-color: white;
55+
border-radius: 0.25rem;
56+
width: 50vw;
57+
padding: 2rem;
58+
position: relative;
59+
}
60+
61+
62+
`;
63+
64+
interface IProps {
65+
apollo: ApolloClient<NormalizedCache>;
66+
}
67+
68+
69+
const App = ({ Component, pageProps }) => {
70+
//const store = useStore(pageProps.initialReduxState)
71+
const apolloClient = useApollo(pageProps.initialApolloState)
72+
// console.log(apolloClient);
73+
return (
74+
<React.Fragment>
75+
<Head>
76+
<title>GraphQL</title>
77+
<meta name="viewport" content="width=device-width, initial-scale=1" />
78+
</Head>
79+
{/* adds the apollo provider to provide it's children with the apollo scope. */}
80+
{/* <Provider store={store}> */}
81+
<ApolloProvider client={apolloClient}>
82+
<ThemeProvider theme={theme}>
83+
<GlobalStyle />
84+
<Header></Header>
85+
<Component {...pageProps} />
86+
</ThemeProvider>
87+
</ApolloProvider>
88+
{/* </Provider> */}
89+
</React.Fragment>
90+
);
91+
92+
}
93+
//export default wrapper.withRedux(App)
94+
export default wrapper.withRedux(App);
95+
// before exporting our App we wrapp it with our own withApollo provider to have access to the our rehydrated apollo client.
96+
//export default withApollo(MyApp);

‎frontend/pages/_app.tsx‎

Lines changed: 58 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,70 @@
1-
import'../style.css'
2-
3-
import { ThemeProvider, createGlobalStyle } from "styled-components";
4-
5-
import { ApolloClient } from "@apollo/client";
61
import { ApolloProvider } from "@apollo/react-hooks";
7-
import Head from "next/head";
8-
import Header from '../components/Layouts/Header';
9-
import { NormalizedCache } from "apollo-boost";
10-
import { Provider } from 'react-redux'
2+
import { Provider } from "react-redux";
3+
//import Home from '!/containers/home';
114
import React from "react";
12-
import { useApollo } from '../lib/apollo'
13-
import { useStore } from '../lib/redux'
14-
import withApollo from "../hooks/withApollo";
15-
//import App from "next/app";
16-
import withRedux from 'next-redux-wrapper';
17-
import { wrapper } from '../store/store';
18-
19-
export interface IThem {
20-
niceBlack: string;
21-
}
5+
import { getDataFromTree } from "react-apollo-graphql";
6+
import { initializeApollo } from "../lib/apollo";
7+
import { initializeStore } from "../lib/redux";
228

23-
export interface IThemeWrapper {
24-
theme: IThem;
25-
}
9+
//import { ApolloProvider } from '@apollo/client';
2610

27-
export const theme: IThem = {
28-
niceBlack: "#001F3F",
29-
};
11+
/**
12+
* Component to show the home container.
13+
*/
14+
class App extends React.Component {
15+
static async getInitialProps({ Component, ctx }) {
16+
const pageProps = Component.getInitialProps
17+
? await Component.getInitialProps(ctx)
18+
: {};
3019

31-
const GlobalStyle = createGlobalStyle<IThemeWrapper>`
32-
body {
33-
margin: 0 auto;
34-
color: ${(props) => props.theme.niceBlack}
35-
}
20+
//Anything returned here can be access by the client
21+
// return {pageProps: pageProps};
3622

37-
.overlay {
38-
position: fixed;
39-
display: block;
40-
overflow: auto;
41-
width: 100%;
42-
height: 100%;
43-
top: 0;
44-
left: 0;
45-
right: 0;
46-
bottom: 0;
47-
background-color: rgba(0,0,0,0.5);
48-
z-index: 999;
49-
cursor: pointer;
50-
}
23+
let serverState = {};
24+
if (!process.browser) {
25+
const apollo = initializeApollo();
26+
const redux = initializeStore(apollo);
27+
// Run all graphql queries
28+
const app = (
29+
<Provider store={redux}>
30+
<ApolloProvider client={apollo}>
31+
<Component {...pageProps} />
32+
</ApolloProvider>
33+
</Provider>
34+
);
35+
await getDataFromTree(app);
36+
const state = redux.getState();
37+
serverState = {
38+
apollo: {
39+
// Make sure to only include Apollo's data state
40+
data: state.apollo.data,
41+
},
42+
};
43+
}
44+
return {
45+
serverState,
46+
pageProps ,
47+
};
48+
}
5149

52-
.content {
53-
margin: 15% auto;
54-
background-color: white;
55-
border-radius: 0.25rem;
56-
width: 50vw;
57-
padding: 2rem;
58-
position: relative;
59-
}
50+
// constructor(props) {
51+
// super(props);
52+
// this.apollo = initializeApollo();
53+
// this.store = initializeStore(this.apollo, props.serverState);
54+
// }
6055

61-
62-
`;
63-
64-
interface IProps {
65-
apollo: ApolloClient<NormalizedCache>;
66-
}
67-
68-
69-
const App = ({ Component, pageProps }) => {
70-
//const store = useStore(pageProps.initialReduxState)
71-
const apolloClient = useApollo(pageProps.initialApolloState)
72-
// console.log(apolloClient);
56+
render() {
57+
const { Component, pageProps, store } = this.props;
58+
const apollo = initializeApollo();
59+
const redux = initializeStore(apollo);
7360
return (
74-
<React.Fragment>
75-
<Head>
76-
<title>GraphQL</title>
77-
<meta name="viewport" content="width=device-width, initial-scale=1" />
78-
</Head>
79-
{/* adds the apollo provider to provide it's children with the apollo scope. */}
80-
{/* <Provider store={store}> */}
81-
<ApolloProvider client={apolloClient}>
82-
<ThemeProvider theme={theme}>
83-
<GlobalStyle />
84-
<Header></Header>
85-
<Component {...pageProps} />
86-
</ThemeProvider>
61+
<Provider store={store}>
62+
<ApolloProvider client={apollo}>
63+
<Component {...pageProps} />
8764
</ApolloProvider>
88-
{/* </Provider> */}
89-
</React.Fragment>
65+
</Provider>
9066
);
91-
67+
}
9268
}
93-
//export default wrapper.withRedux(App)
94-
export default wrapper.withRedux(App);
95-
// before exporting our App we wrapp it with our own withApollo provider to have access to the our rehydrated apollo client.
96-
//export default withApollo(MyApp);
69+
70+
export default App;

‎frontend/yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5355,6 +5355,11 @@ randomfill@^1.0.3:
53555355
randombytes "^2.0.5"
53565356
safe-buffer "^5.1.0"
53575357

5358+
react-apollo-graphql@^1.0.2:
5359+
version "1.0.2"
5360+
resolved "https://registry.yarnpkg.com/react-apollo-graphql/-/react-apollo-graphql-1.0.2.tgz#c37965c842e352bb0ab969092ee3e1a359401edd"
5361+
integrity sha512-nu0FBIZ0+TJt2y16w6rjfhB/DPJ3OVgnr78PvUkG8/WoqKarBJk2iwxAFHwpN+h2XwVVuqIlXK9x9AE3davgsA==
5362+
53585363
react-dom@^16.13.1:
53595364
version "16.13.1"
53605365
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"

0 commit comments

Comments
 (0)