Skip to content
This repository was archived by the owner on Oct 23, 2018. It is now read-only.

Commit 161a3b7

Browse files
committed
Adds minimal boilerplate.
1 parent 9078bba commit 161a3b7

File tree

14 files changed

+7537
-0
lines changed

14 files changed

+7537
-0
lines changed

minimal/.babelrc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": ["babel-preset-expo"],
3+
"env": {
4+
"development": {
5+
"plugins": ["transform-react-jsx-source"]
6+
}
7+
}
8+
}

minimal/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules/
2+
.expo/
3+
npm-debug.*

minimal/.watchmanconfig

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

minimal/App.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { ApolloProvider } from 'react-apollo';
3+
import { ApolloClient, HttpLink, InMemoryCache } from 'apollo-client-preset';
4+
import Home from './Home';
5+
6+
const httpLink = new HttpLink({ uri: 'http://localhost:4000' });
7+
8+
const client = new ApolloClient({
9+
link: httpLink,
10+
cache: new InMemoryCache()
11+
});
12+
13+
export default class App extends React.Component {
14+
render() {
15+
return (
16+
<ApolloProvider client={client}>
17+
<Home />
18+
</ApolloProvider>
19+
);
20+
}
21+
}

minimal/App.test.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import App from './App';
3+
4+
import renderer from 'react-test-renderer';
5+
6+
it('renders without crashing', () => {
7+
const rendered = renderer.create(<App />).toJSON();
8+
expect(rendered).toBeTruthy();
9+
});

minimal/Home.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import { StyleSheet, Text, View } from 'react-native';
3+
import { graphql } from 'react-apollo';
4+
import gql from 'graphql-tag';
5+
6+
class Home extends React.Component {
7+
render() {
8+
if (this.props.helloQuery.loading)
9+
return (
10+
<View style={styles.container}>
11+
<Text>Loading...</Text>
12+
</View>
13+
);
14+
15+
return (
16+
<View style={styles.container}>
17+
<Text>{this.props.helloQuery.hello}</Text>
18+
</View>
19+
);
20+
}
21+
}
22+
23+
const styles = StyleSheet.create({
24+
container: {
25+
alignItems: 'center',
26+
flex: 1,
27+
justifyContent: 'center'
28+
}
29+
});
30+
31+
const HELLO_QUERY = gql`
32+
query HelloQuery {
33+
hello
34+
}
35+
`;
36+
37+
export default graphql(HELLO_QUERY, {
38+
name: 'helloQuery'
39+
})(Home);

minimal/README.md

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
2+
# react-native-apollo-basic
3+
4+
🚀 Basic starter code for a mobile app based on React Native, GraphQL & Apollo Client.
5+
6+
![](https://imgur.com/LG6r1q1.png)
7+
8+
## TODO
9+
10+
- [ ] Fix runtime issue
11+
- [ ] Enable in [https://github.com/graphql-cli/graphql-cli/blob/master/src/cmds/create/boilerplates.ts](https://github.com/graphql-cli/graphql-cli/blob/master/src/cmds/create/boilerplates.ts)
12+
13+
> **PRs are very welcome** 🙏
14+
15+
## Technologies
16+
17+
* **Frontend**
18+
* [React Native](https://facebook.github.io/react-native/): JavaScript framework for building native mobile apps with [React](https://facebook.github.io/react/)
19+
* [Apollo Client](https://github.com/apollographql/apollo-client): Fully-featured, production ready caching GraphQL client
20+
* **Backend**
21+
* [Graphcool](https://www.graph.cool): Powerful GraphQL database
22+
* [`graphql-yoga`](https://github.com/graphcool/graphql-yoga/): Fully-featured GraphQL server with focus on easy setup, performance & great developer experience
23+
* [`graphcool-binding`](https://github.com/graphcool/graphcool-binding): GraphQL binding for Graphcool services
24+
25+
## Requirements
26+
27+
You need to have the following things installed:
28+
29+
* [Expo](https://expo.io/)
30+
* Node 8+
31+
* Graphcool CLI: `npm i -g graphcool@beta`
32+
* GraphQL CLI: `npm i -g graphql-cli`
33+
* GraphQL Playground desktop app (optional): [Download](https://github.com/graphcool/graphql-playground/releases)
34+
35+
## Getting started
36+
37+
```sh
38+
# Bootstrap GraphQL server in directory `my-app`, based on `react-fullstack-basic` boilerplate
39+
graphql create my-app --boilerplate react-native-basic
40+
41+
# Navigate into the new project's `server` directory
42+
cd my-app/server
43+
44+
# Deploy the Graphcool database & start the server (runs on http://localhost:4000)
45+
yarn start
46+
47+
# Navigate back into the project's root directory and launch the React app
48+
cd ..
49+
yarn run ios # open with iOS simulator
50+
# yarn run android # open with Android emulator
51+
# yarn start # open using the Expo app on your phone (does not work when server is deployed locally)
52+
```
53+
54+
<details>
55+
56+
<summary>Alternative: Clone repo</summary>
57+
58+
```sh
59+
TODO
60+
```
61+
62+
</details>
63+
64+
## Docs
65+
66+
### Project structure
67+
68+
#### `/server`
69+
70+
- [`.graphqlconfig.yml`](./server/.graphqlconfig.yml) GraphQL configuration file containing the endpoints and schema configuration. Used by the [`graphql-cli`](https://github.com/graphcool/graphql-cli) and the [GraphQL Playground](https://github.com/graphcool/graphql-playground). See [`graphql-config`](https://github.com/graphcool/graphql-config) for more information.
71+
- [`graphcool.yml`](./server/graphcool.yml): The root configuration file for your database service ([documentation](https://www.graph.cool/docs/1.0/reference/graphcool.yml/overview-and-example-foatho8aip)).
72+
73+
#### `/server/database`
74+
75+
- [`database/datamodel.graphql`](./server/database/datamodel.graphql) contains the data model that you define for the project (written in [SDL](https://blog.graph.cool/graphql-sdl-schema-definition-language-6755bcb9ce51)).
76+
- [`database/schema.generated.graphql`](./server/database/schema.generated.graphql) defines the **database schema**. It contains the definition of the CRUD API for the types in your data model and is generated based on your `datamodel.graphql`. **You should never edit this file manually**, but introduce changes only by altering `datamodel.graphql` and run `graphcool deploy`.
77+
78+
#### `/server/src`
79+
80+
- [`src/schema.graphql`](src/schema.graphql) defines your **application schema**. It contains the GraphQL API that you want to expose to your client applications.
81+
- [`src/index.js`](src/index.js) is the entry point of your server, pulling everything together and starting the `GraphQLServer` from [`graphql-yoga`](https://github.com/graphcool/graphql-yoga).
82+
83+
### Common questions
84+
85+
#### I'm getting a 'Schema could not be fetched.' error after deploying, what gives?
86+
87+
Access to the Graphcool API is secured by a secret. This also applies to the introspection query. Using the latest version of GraphQL Playground, the `Authorization` header should automatically be setup with a proper JWT signing the secret. If that's not the case, you can follow these steps to access your API:
88+
89+
1. Visit http://jwtbuilder.jamiekurtz.com/
90+
1. Replace the `Key` at the bottom of the page with your `secret` from the [`graphcool.yml`](./server/graphcool.yml#L5)
91+
1. Click `Create signed JWT` and copy the obtained token
92+
1. Now, to access the schema, use the `Authorization: Bearer <token>` header, or in the GraphQL Playground set it as JSON:
93+
```json
94+
{
95+
"Authorization": "Bearer <token>"
96+
}
97+
```
98+
1. Reload the schema in the Playground (the _refresh_-button is located right next to the URL of the server)
99+
100+
> Note: Currently, no content of the signed JWT is verified by the database! This will be implemented [according to this proposal](https://github.com/graphcool/framework/issues/1365) at a later stage.
101+
102+
## Contributing
103+
104+
Your feedback is **very helpful**, please share your opinion and thoughts! If you have any questions, join the [`#graphql-boilerplate`](https://graphcool.slack.com/messages/graphql-boilerplate) channel on our [Slack](https://graphcool.slack.com/).

minimal/app.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"expo": {
3+
"sdkVersion": "24.0.0"
4+
}
5+
}

minimal/install.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const fs = require('fs')
2+
const path = require('path')
3+
4+
module.exports = async ({ project }) => {
5+
const templateName = 'graphql-boilerplate'
6+
replaceInFile('server/src/index.js', templateName, project)
7+
replaceInFile('server/package.json', templateName, project)
8+
replaceInFile('server/graphcool.yml', templateName, project)
9+
10+
console.log(`\
11+
Next steps:
12+
1. Change directory: \`cd ${project}/server\`
13+
2. Deploy database service: \`graphcool deploy\`
14+
3. Start local server: \`yarn start\` (you can now open a Playground at http://localhost:4000)
15+
4. Change directory: \`cd ..\`
16+
5. Start React app: \`yarn start\`
17+
6. Open browser: http://localhost:3000
18+
`)
19+
}
20+
21+
function replaceInFile(filePath, searchValue, replaceValue) {
22+
const contents = fs.readFileSync(filePath, 'utf8')
23+
const newContents = contents.replace(
24+
new RegExp(searchValue, 'g'),
25+
replaceValue,
26+
)
27+
fs.writeFileSync(filePath, newContents)
28+
}

minimal/package.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "minimal",
3+
"version": "0.1.0",
4+
"private": true,
5+
"devDependencies": {
6+
"jest-expo": "24.0.0",
7+
"react-native-scripts": "1.8.1",
8+
"react-test-renderer": "16.0.0"
9+
},
10+
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
11+
"scripts": {
12+
"start": "react-native-scripts start",
13+
"eject": "react-native-scripts eject",
14+
"android": "react-native-scripts android",
15+
"ios": "react-native-scripts ios",
16+
"test": "node node_modules/jest/bin/jest.js --watch"
17+
},
18+
"jest": {
19+
"preset": "jest-expo"
20+
},
21+
"dependencies": {
22+
"apollo-client-preset": "1.0.6",
23+
"expo": "24.0.2",
24+
"graphql": "0.12.3",
25+
"graphql-tag": "2.6.1",
26+
"react": "16.0.0",
27+
"react-apollo": "2.0.4",
28+
"react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz"
29+
}
30+
}

minimal/server/index.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const { GraphQLServer } = require('graphql-yoga');
2+
3+
const typeDefs = `
4+
type Query {
5+
hello: String
6+
}
7+
`;
8+
9+
const resolvers = {
10+
Query: {
11+
hello() {
12+
return 'Hello world!';
13+
}
14+
}
15+
};
16+
17+
const server = new GraphQLServer({
18+
typeDefs,
19+
resolvers
20+
});
21+
22+
server.start(() => console.log('Server is running on http://localhost:4000'));

minimal/server/package.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "minimal-server",
3+
"scripts": {
4+
"start": "node index.js",
5+
"deploy": "now --public && now alias && now rm --yes --safe graphql-template-node"
6+
},
7+
"dependencies": {
8+
"graphql-yoga": "1.1.4"
9+
},
10+
"devDependencies": {
11+
"now": "9.0.1"
12+
},
13+
"now": {
14+
"alias": "graphql-template-node"
15+
}
16+
}

0 commit comments

Comments
 (0)