commit
b2e42be0ef
19 changed files with 22359 additions and 0 deletions
@ -0,0 +1,21 @@
|
||||
# See https://help.github.com/ignore-files/ for more about ignoring files. |
||||
|
||||
# dependencies |
||||
/node_modules |
||||
|
||||
# testing |
||||
/coverage |
||||
|
||||
# production |
||||
/build |
||||
|
||||
# misc |
||||
.DS_Store |
||||
.env.local |
||||
.env.development.local |
||||
.env.test.local |
||||
.env.production.local |
||||
|
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
@ -0,0 +1,21 @@
|
||||
MIT License |
||||
|
||||
Copyright (c) 2017 Harshit Pant |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
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 THE |
||||
AUTHORS OR COPYRIGHT HOLDERS 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. |
||||
@ -0,0 +1,23 @@
|
||||
## Getting started |
||||
|
||||
This requires working GraphQL server to test with. |
||||
|
||||
* Query: |
||||
- getAllBooks: [Book] |
||||
- getBookById: Book |
||||
|
||||
* Type |
||||
- Book |
||||
- _id: String! |
||||
- title: String! |
||||
- author: String! |
||||
- price: Int! |
||||
|
||||
|
||||
then |
||||
```bash |
||||
> git clone https://src.cogto.com/sipp11/apollo-state-local-cache-example.git |
||||
> cd apollo-state-local-cache-example |
||||
> npm i |
||||
> npm start |
||||
``` |
||||
@ -0,0 +1,21 @@
|
||||
{ |
||||
"name": "bookstore-apollo", |
||||
"version": "0.1.0", |
||||
"private": true, |
||||
"dependencies": { |
||||
"apollo-boost": "^0.1.19", |
||||
"apollo-link-state": "^0.3.0", |
||||
"graphql": "^0.12.3", |
||||
"graphql-tag": "^2.6.1", |
||||
"react": "^16.2.0", |
||||
"react-apollo": "^2.0.4", |
||||
"react-dom": "^16.2.0", |
||||
"react-scripts": "^2.1.0" |
||||
}, |
||||
"scripts": { |
||||
"start": "react-scripts start", |
||||
"build": "react-scripts build", |
||||
"test": "react-scripts test --env=jsdom", |
||||
"eject": "react-scripts eject" |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
||||
<meta name="theme-color" content="#000000"> |
||||
<!-- |
||||
manifest.json provides metadata used when your web app is added to the |
||||
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ |
||||
--> |
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> |
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> |
||||
<!-- |
||||
Notice the use of %PUBLIC_URL% in the tags above. |
||||
It will be replaced with the URL of the `public` folder during the build. |
||||
Only files inside the `public` folder can be referenced from the HTML. |
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will |
||||
work correctly both with client-side routing and a non-root public URL. |
||||
Learn how to configure a non-root public URL by running `npm run build`. |
||||
--> |
||||
<title>React App</title> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
You need to enable JavaScript to run this app. |
||||
</noscript> |
||||
<div id="root"></div> |
||||
<!-- |
||||
This HTML file is a template. |
||||
If you open it directly in the browser, you will see an empty page. |
||||
|
||||
You can add webfonts, meta tags, or analytics to this file. |
||||
The build step will place the bundled scripts into the <body> tag. |
||||
|
||||
To begin the development, run `npm start` or `yarn start`. |
||||
To create a production bundle, use `npm run build` or `yarn build`. |
||||
--> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,15 @@
|
||||
{ |
||||
"short_name": "React App", |
||||
"name": "Create React App Sample", |
||||
"icons": [ |
||||
{ |
||||
"src": "favicon.ico", |
||||
"sizes": "64x64 32x32 24x24 16x16", |
||||
"type": "image/x-icon" |
||||
} |
||||
], |
||||
"start_url": "./index.html", |
||||
"display": "standalone", |
||||
"theme_color": "#000000", |
||||
"background_color": "#ffffff" |
||||
} |
||||
@ -0,0 +1,15 @@
|
||||
button { |
||||
padding: 0.5rem; |
||||
cursor: pointer; |
||||
background: rebeccapurple; |
||||
border: none; |
||||
outline: none; |
||||
border-radius: 0.6rem; |
||||
font-size: 1.4rem; |
||||
margin: 0 1rem 0 0; |
||||
color: white; |
||||
} |
||||
|
||||
#root { |
||||
margin: 1rem; |
||||
} |
||||
@ -0,0 +1,92 @@
|
||||
import React, { Component } from 'react'; |
||||
import gql from 'graphql-tag'; |
||||
import { graphql, compose } from 'react-apollo'; |
||||
import './App.css'; |
||||
|
||||
class App extends Component { |
||||
render() { |
||||
const { showTypeQuery, allBooksQuery, showNetworkStatus: { networkStatus } } = this.props; |
||||
if (showTypeQuery.loading || allBooksQuery.loading) { |
||||
return <h1>Loading....</h1>; |
||||
} |
||||
const books = allBooksQuery.getAllBooks.filter(item => { |
||||
if (showTypeQuery.show_type === 'BELOW_15') { |
||||
return item.price < 15; |
||||
} |
||||
return item.price >= 15; |
||||
}); |
||||
|
||||
return ( |
||||
<div> |
||||
<h1>Bookstore - {networkStatus.isConnected ? 'yes' : 'no'}</h1> |
||||
{books.map(item => ( |
||||
<h3 key={item._id}> |
||||
{item.title} - ${item.price} |
||||
</h3> |
||||
))} |
||||
<button onClick={() => this.changeShow('BELOW_15')}>Below $15</button> |
||||
<button onClick={() => this.changeShow('ABOVE_15')}>Above $15</button> |
||||
<button onClick={() => this.toggleNetStatus(!networkStatus.isConnected)}>Toggle Network</button> |
||||
</div> |
||||
); |
||||
} |
||||
changeShow = type => { |
||||
this.props.changeShowType({ |
||||
variables: { show_type: type } |
||||
}); |
||||
}; |
||||
toggleNetStatus = value => { |
||||
this.props.updateNetworkStatus({ |
||||
variables: { isConnected: value } |
||||
}) |
||||
} |
||||
} |
||||
|
||||
const allBooksQuery = gql` |
||||
query allBooksQuery { |
||||
getAllBooks { |
||||
_id |
||||
author |
||||
title |
||||
price |
||||
} |
||||
} |
||||
`;
|
||||
|
||||
const showTypeQuery = gql` |
||||
query showTypeQuery { |
||||
show_type @client |
||||
} |
||||
`;
|
||||
|
||||
const showTypeMutation = gql` |
||||
mutation showTypeMutation($show_type: String!) { |
||||
changeShowType(show_type: $show_type) @client { |
||||
show_type |
||||
} |
||||
} |
||||
`;
|
||||
|
||||
const showNetworkStatus = gql` |
||||
query showNetworkStatus { |
||||
networkStatus @client { |
||||
isConnected |
||||
} |
||||
} |
||||
` |
||||
|
||||
const updateNetworkStatus = gql` |
||||
mutation updateNetworkStatus($isConnected: Boolean) { |
||||
changeNetworkStatus(isConnected: $isConnected) @client { |
||||
isConnected |
||||
} |
||||
} |
||||
` |
||||
|
||||
export default compose( |
||||
graphql(showTypeQuery, { name: 'showTypeQuery' }), |
||||
graphql(showNetworkStatus, { name: 'showNetworkStatus' }), |
||||
graphql(allBooksQuery, { name: 'allBooksQuery' }), |
||||
graphql(updateNetworkStatus, { name: 'updateNetworkStatus'}), |
||||
graphql(showTypeMutation, { name: 'changeShowType'}) |
||||
)(App); |
||||
@ -0,0 +1,8 @@
|
||||
import React from 'react'; |
||||
import ReactDOM from 'react-dom'; |
||||
import App from './App'; |
||||
|
||||
it('renders without crashing', () => { |
||||
const div = document.createElement('div'); |
||||
ReactDOM.render(<App />, div); |
||||
}); |
||||
@ -0,0 +1,23 @@
|
||||
// import { ApolloClient } from 'apollo-client';
|
||||
// import { InMemoryCache } from 'apollo-cache-inmemory';
|
||||
// import { withClientState } from 'apollo-link-state';
|
||||
// import { HttpLink } from 'apollo-link-http';
|
||||
// import { ApolloLink } from 'apollo-link';
|
||||
import resolvers from './resolvers'; |
||||
import ApolloClient from "apollo-boost" |
||||
|
||||
const client = new ApolloClient({ |
||||
uri: 'http://localhost:4000', |
||||
clientState: { |
||||
defaults: { |
||||
show_type: 'BELOW_15', |
||||
network_status: { |
||||
__typename: 'NetworkStatus', |
||||
isConnected: false |
||||
}, |
||||
}, |
||||
resolvers, |
||||
} |
||||
}) |
||||
|
||||
export default client; |
||||
@ -0,0 +1,6 @@
|
||||
body { |
||||
margin: 0; |
||||
padding: 0; |
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, |
||||
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; |
||||
} |
||||
@ -0,0 +1,15 @@
|
||||
import React from 'react'; |
||||
import ReactDOM from 'react-dom'; |
||||
import { ApolloProvider } from 'react-apollo'; |
||||
import client from './apollo'; |
||||
import './index.css'; |
||||
import App from './App'; |
||||
import registerServiceWorker from './registerServiceWorker'; |
||||
|
||||
ReactDOM.render( |
||||
<ApolloProvider client={client}> |
||||
<App /> |
||||
</ApolloProvider>, |
||||
document.getElementById('root') |
||||
); |
||||
registerServiceWorker(); |
||||
@ -0,0 +1,108 @@
|
||||
// In production, we register a service worker to serve assets from local cache.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||
// cached resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||
// This link also includes instructions on opting out of this behavior.
|
||||
|
||||
const isLocalhost = Boolean( |
||||
window.location.hostname === 'localhost' || |
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' || |
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match( |
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ |
||||
) |
||||
); |
||||
|
||||
export default function register() { |
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { |
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location); |
||||
if (publicUrl.origin !== window.location.origin) { |
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
|
||||
return; |
||||
} |
||||
|
||||
window.addEventListener('load', () => { |
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; |
||||
|
||||
if (isLocalhost) { |
||||
// This is running on localhost. Lets check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl); |
||||
} else { |
||||
// Is not local host. Just register service worker
|
||||
registerValidSW(swUrl); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
function registerValidSW(swUrl) { |
||||
navigator.serviceWorker |
||||
.register(swUrl) |
||||
.then(registration => { |
||||
registration.onupdatefound = () => { |
||||
const installingWorker = registration.installing; |
||||
installingWorker.onstatechange = () => { |
||||
if (installingWorker.state === 'installed') { |
||||
if (navigator.serviceWorker.controller) { |
||||
// At this point, the old content will have been purged and
|
||||
// the fresh content will have been added to the cache.
|
||||
// It's the perfect time to display a "New content is
|
||||
// available; please refresh." message in your web app.
|
||||
console.log('New content is available; please refresh.'); |
||||
} else { |
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.'); |
||||
} |
||||
} |
||||
}; |
||||
}; |
||||
}) |
||||
.catch(error => { |
||||
console.error('Error during service worker registration:', error); |
||||
}); |
||||
} |
||||
|
||||
function checkValidServiceWorker(swUrl) { |
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl) |
||||
.then(response => { |
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
if ( |
||||
response.status === 404 || |
||||
response.headers.get('content-type').indexOf('javascript') === -1 |
||||
) { |
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => { |
||||
registration.unregister().then(() => { |
||||
window.location.reload(); |
||||
}); |
||||
}); |
||||
} else { |
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl); |
||||
} |
||||
}) |
||||
.catch(() => { |
||||
console.log( |
||||
'No internet connection found. App is running in offline mode.' |
||||
); |
||||
}); |
||||
} |
||||
|
||||
export function unregister() { |
||||
if ('serviceWorker' in navigator) { |
||||
navigator.serviceWorker.ready.then(registration => { |
||||
registration.unregister(); |
||||
}); |
||||
} |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
export default { |
||||
Mutation: { |
||||
changeShowType: (_, { show_type }, { cache }) => { |
||||
cache.writeData({ data: { show_type } }); |
||||
return { show_type, __typename: 'ShowType' }; |
||||
}, |
||||
changeNetworkStatus: (_, { isConnected }, { cache }) => { |
||||
const data = { |
||||
networkStatus: { |
||||
__typename: 'NetworkStatus', |
||||
isConnected |
||||
}, |
||||
}; |
||||
cache.writeData({ data }); |
||||
return { isConnected, __typename: 'NetworkStatus' }; |
||||
} |
||||
} |
||||
}; |
||||
Loading…
Reference in new issue