fix react-apollo issue apollographql/react-apollo#826 duplicate name …

…of variables;fix button style;set query fetch-policy;fix select component style

components/Button.js

@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 export default styled.button`
+  text-align: center;
   -moz-appearance: none;
   -webkit-appearance: none;
   -webkit-box-align: center;
@@ -14,9 +15,6 @@ export default styled.button`
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-size: inherit;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
   line-height: 1.5;
   padding-bottom: calc(0.375em - 1px);
   padding-left: calc(0.625em - 1px);
@@ -33,7 +31,6 @@ export default styled.button`
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
-  text-align: center;
   white-space: nowrap;
   width: ${props => props.refresh || props.primary ? '100%' : 'auto'};
   height: ${props => props.refresh ? '100%' : '0.875rem'};

components/PrizeList.js

@@ -39,7 +39,11 @@ function PrizeList ({ data: { loading, error, prize }, onRefresh}) {
 }
 
 export default compose(
-  graphql(PrizeListQuery),
+  graphql(PrizeListQuery, {
+    options: () => ({
+      fetchPolicy: 'network-only',
+    }),
+  }),
   graphql(GetNumberMutation, {
     props: ({ ownProps, mutate }) => ({
       onRefresh: type => mutate({ variables: { type } }),

components/PrizeNumber.js

@@ -45,6 +45,7 @@ export default ({ data, onRefresh }) => (
         border-radius: 50%;
         line-height: 0.7813rem;
         font-size: 15px;
+        color: #fff;
       }
 
       .item_numlist-item:not(:first-child) {

components/Select.js

@@ -14,7 +14,7 @@ export const StyledSelect = styled.select`
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  font-size: inherit;
+  font-size: 0.375rem;
   height: 0.8281rem;
   -webkit-box-pack: start;
   -ms-flex-pack: start;

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "node server.js",
     "build": "next build",
-    "start": "NODE_ENV=production node server.js"
+    "start": "NODE_ENV=production node server.js",
+    "postinstall": "rimraf node_modules/react-apollo/node_modules/react-dom"
   },
   "dependencies": {
     "babel-plugin-styled-components": "^1.1.5",

server.js

@@ -10,20 +10,20 @@ const handle = app.getRequestHandler()
 
 app.prepare()
 .then(() => {
-  const app = express()
+  const server = express()
 
-  app.use('/graphql', expressGraphQL(req => ({
+  server.use('/graphql', expressGraphQL(req => ({
     schema,
     graphiql: dev,
     rootValue: { request: req },
     pretty: dev,
   })));
 
-  app.get('*', (req, res) => {
+  server.get('*', (req, res) => {
     return handle(req, res)
   })
 
-  app.listen(3000, (err) => {
+  server.listen(3000, (err) => {
     if (err) throw err
     console.log('> Ready on http://localhost:3000')
   })