Skip to content
This repository was archived by the owner on Oct 23, 2018. It is now read-only.
Open
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

**Select a boilerplate and follow the instructions in the belonging README to get started:**

- `minimal` (_coming soon_): Minimal boilerplate with basic "Hello World" functionality
- [`minimal`](./minimal): Minimal boilerplate with basic "Hello World" functionality
- [`basic`](./basic): Basic boilerplate based on a simple data model and with a GraphQL database
- `advanced` (_coming soon_): Advanced boilerplate with a GraphQL database, authentication and realtime subscriptions

Expand Down
8 changes: 8 additions & 0 deletions minimal/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
3 changes: 3 additions & 0 deletions minimal/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules/**/*
.expo/*
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should change this to reflect the basic boilerplate. No need to globs to be used; it could just be node_modules/ and .expo/

npm-debug.*
28 changes: 28 additions & 0 deletions minimal/.install/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
const fs = require('fs')
const { replaceInFiles, deploy, writeEnv, getInfo } = require('graphql-boilerplate-install')

module.exports = async ({ project, projectDir }) => {
const templateName = 'graphql-boilerplate'

replaceInFiles(['server/src/index.js', 'server/package.json', 'server/database/prisma.yml'], templateName, project)

console.log('Running $ prisma deploy...')

process.chdir('server/')

await deploy(false)
const info = await getInfo()

process.chdir('../')

replaceInFiles(['server/src/index.js'], '__PRISMA_ENDPOINT__', info.httpEndpoint)

console.log(`\
Next steps:
1. Change directory: \`cd ${projectDir}/server\`
2. Start local server: \`yarn start\` (you can now open a Playground at http://localhost:4000)
3. Change directory: \`cd ..\`
4. Start React app: \`yarn start\`
5. Open browser: http://localhost:3000
`)
}
12 changes: 12 additions & 0 deletions minimal/.install/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"name": "install",
"version": "0.0.0",
"devDependencies": {
"graphql-boilerplate-install": "0.1.8"
},
"prettier": {
"semi": false,
"singleQuote": true,
"trailingComma": "all"
}
}
100 changes: 100 additions & 0 deletions minimal/.install/yarn.lock
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


commander@^2.9.0:
version "2.13.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"

[email protected], cross-spawn@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
dependencies:
lru-cache "^4.0.1"
shebang-command "^1.2.0"
which "^1.2.9"

[email protected]:
version "0.1.8"
resolved "https://registry.yarnpkg.com/graphql-boilerplate-install/-/graphql-boilerplate-install-0.1.8.tgz#7d71b3f5908d968aaa77c524765cc1b4d7bec348"
dependencies:
cross-spawn "5.1.0"
npm-run "4.1.2"

isexe@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"

lru-cache@^4.0.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
dependencies:
pseudomap "^1.0.2"
yallist "^2.1.2"

minimist@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"

npm-path@^2.0.2, npm-path@^2.0.3:
version "2.0.4"
resolved "https://registry.yarnpkg.com/npm-path/-/npm-path-2.0.4.tgz#c641347a5ff9d6a09e4d9bce5580c4f505278e64"
dependencies:
which "^1.2.10"

[email protected]:
version "4.1.2"
resolved "https://registry.yarnpkg.com/npm-run/-/npm-run-4.1.2.tgz#1030e1ec56908c89fcc3fa366d03a2c2ba98eb99"
dependencies:
cross-spawn "^5.1.0"
minimist "^1.2.0"
npm-path "^2.0.3"
npm-which "^3.0.1"
serializerr "^1.0.3"
sync-exec "^0.6.2"

npm-which@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/npm-which/-/npm-which-3.0.1.tgz#9225f26ec3a285c209cae67c3b11a6b4ab7140aa"
dependencies:
commander "^2.9.0"
npm-path "^2.0.2"
which "^1.2.10"

protochain@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/protochain/-/protochain-1.0.5.tgz#991c407e99de264aadf8f81504b5e7faf7bfa260"

pseudomap@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"

serializerr@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/serializerr/-/serializerr-1.0.3.tgz#12d4c5aa1c3ffb8f6d1dc5f395aa9455569c3f91"
dependencies:
protochain "^1.0.5"

shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
dependencies:
shebang-regex "^1.0.0"

shebang-regex@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"

sync-exec@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/sync-exec/-/sync-exec-0.6.2.tgz#717d22cc53f0ce1def5594362f3a89a2ebb91105"

which@^1.2.10, which@^1.2.9:
version "1.3.0"
resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
dependencies:
isexe "^2.0.0"

yallist@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
1 change: 1 addition & 0 deletions minimal/.watchmanconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
23 changes: 23 additions & 0 deletions minimal/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react';
import { Text, View } from 'react-native';
import Expo from "expo";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd love to see Constants imported specifically, instead of importing all of Expo.

import { ApolloProvider } from 'react-apollo';
import ApolloClient from 'apollo-boost';
import Home from './src/Components/Home';

const { manifest } = Expo.Constants;
const url = manifest.debuggerHost.split(':').shift().concat(':4000')

const client = new ApolloClient({
uri: `http://${url}`,
})

export default class App extends React.Component {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because this component only has a render method, please convert it to a functional component.

render() {
return (
<ApolloProvider client={client} >
<Home />
</ApolloProvider>
);
}
}
104 changes: 104 additions & 0 deletions minimal/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file has an assortment of updates that are necessary for the minimal boilerplate. Please review. 😄

# react-native-apollo-basic

🚀 Basic starter code for a mobile app based on React Native, GraphQL & Apollo Client.

![](https://imgur.com/LG6r1q1.png)

## TODO

- [ ] Fix runtime issue
- [ ] 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)

> **PRs are very welcome** 🙏

## Technologies

* **Frontend**
* [React Native](https://facebook.github.io/react-native/): JavaScript framework for building native mobile apps with [React](https://facebook.github.io/react/)
* [Apollo Client](https://github.com/apollographql/apollo-client): Fully-featured, production ready caching GraphQL client
* **Backend**
* [Graphcool](https://www.graph.cool): Powerful GraphQL database
* [`graphql-yoga`](https://github.com/graphcool/graphql-yoga/): Fully-featured GraphQL server with focus on easy setup, performance & great developer experience
* [`graphcool-binding`](https://github.com/graphcool/graphcool-binding): GraphQL binding for Graphcool services

## Requirements

You need to have the following things installed:

* [Expo](https://expo.io/)
* Node 8+
* Graphcool CLI: `npm i -g graphcool`
* GraphQL CLI: `npm i -g graphql-cli`
* GraphQL Playground desktop app (optional): [Download](https://github.com/graphcool/graphql-playground/releases)

## Getting started

```sh
# Bootstrap GraphQL server in directory `my-app`, based on `react-fullstack-minimal` boilerplate
graphql create my-app --boilerplate react-native-minimal

# Navigate into the new project's `server` directory
cd my-app/server

# Deploy the Graphcool database & start the server (runs on http://localhost:4000)
yarn start

# Navigate back into the project's root directory and launch the React app
cd ..
exp:start # start react-native server
yarn run ios # open with iOS simulator
yarn run android # open with Android emulator
```

<details>

<summary>Alternative: Clone repo</summary>

```sh
TODO
```

</details>

## Docs

### Project structure

#### `/server`

- [`.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.
- [`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)).

#### `/server/database`

- [`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)).
- [`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`.

#### `/server/src`

- [`src/schema.graphql`](src/schema.graphql) defines your **application schema**. It contains the GraphQL API that you want to expose to your client applications.
- [`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).

### Common questions

#### I'm getting a 'Schema could not be fetched.' error after deploying, what gives?

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:

1. Visit http://jwtbuilder.jamiekurtz.com/
1. Replace the `Key` at the bottom of the page with your `secret` from the [`graphcool.yml`](./server/graphcool.yml#L5)
1. Click `Create signed JWT` and copy the obtained token
1. Now, to access the schema, use the `Authorization: Bearer <token>` header, or in the GraphQL Playground set it as JSON:
```json
{
"Authorization": "Bearer <token>"
}
```
1. Reload the schema in the Playground (the _refresh_-button is located right next to the URL of the server)

> 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.

## Contributing

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/).
27 changes: 27 additions & 0 deletions minimal/app.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd love to see this file more complete, rather than the defaults that Expo provides.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the defaults are more than enough

"expo": {
"name": "app",
"description": "This project is really great.",
"slug": "app",
"privacy": "public",
"sdkVersion": "26.0.0",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's go ahead and jump to 27.0.0 (announced here).

"platforms": ["ios", "android"],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
}
}
}
Binary file added minimal/assets/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added minimal/assets/splash.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 45 additions & 0 deletions minimal/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
{
"name": "react-native-fullstack-boilerplate",
"version": "0.1.0",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "react-native-scripts start",
"exp:start": "exp start --lan",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does --lan afford users versus react-native-scripts start?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we are depending on local ip rather than domain url, it's necessary to use --lan to make that app has access to prisma server

"exp:android": "exp android",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the difference between exp android/ios versus react-native-scripts android/ios?

"exp:ios": "exp ios",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"devDependencies": {
"eslint": "4.18.1",
"eslint-config-airbnb": "16.1.0",
"eslint-config-airbnb-base": "12.1.0",
"eslint-plugin-import": "2.9.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.7.0",
"eslint-plugin-react-native": "3.2.1",
"jest-expo": "25.1.0",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Version 27 would change this to "^27.0.0"

"react-native-scripts": "1.11.1",
"react-test-renderer": "16.2.0"
},
"dependencies": {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR works for me on Windows 10 w/ exp cli commands exp lan --start followed by exp android

Perhaps the exp cli scripts can be added as npm scripts (for transparency to those unfamiliar with exp cli requirements)

something like:

  "scripts": {
    "start": "react-native-scripts start",
    "exp:start:lan": "exp start --lan",
    "exp:android": "exp android",
    "exp:ios": "exp ios",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },

"apollo-boost": "^0.1.4",
"expo": "^26.0.0",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Version 27 would change this to: "^27.0.0"

"graphql": "^0.13.2",
"graphql-tag": "^2.8.0",
"react": "16.3.0-alpha.1",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Version 27 would change this to "16.3.1"

"react-apollo": "^2.1.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Version 27 would change this to: "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz"

},
"prettier": {
"semi": false,
"singleQuote": true,
"trailingComma": "all"
}
}
2 changes: 2 additions & 0 deletions minimal/server/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
package.json.lock
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would love to make this identical to the basic server's .gitignore.

16 changes: 16 additions & 0 deletions minimal/server/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add the prettier settings from the basic server's package.json.

"name": "graphql-boilerplate",
"version": "1.0.0",
"scripts": {
"start": "node src/index.js"
},
"keywords": [
"react-native",
"prisma",
"graphcool"
],
"author": "Subramanya Chakravarthy",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove this line 😄

"dependencies": {
"graphql-yoga": "^1.8.2"
}
}
Loading