Skip to content

Commit 9ae150a

Browse files
committed
initial commit
0 parents  commit 9ae150a

File tree

144 files changed

+45865
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

144 files changed

+45865
-0
lines changed

.gitignore

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.DS_Store
2+
npm-debug.log
3+
data/schema.graphql
4+
node_modules
5+
.idea
6+
.netlify
7+
build
8+
.graphcoolrc

README.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
# React & GraphQL examples
2+
3+
Code examples & starter kits to see how React works with GraphQL and other technologies.
4+
5+
<hr>
6+
7+
**<p align="center">Select an example** from the list above to get started ⤴️</p>
8+
9+
<hr>
10+
11+
<p align="center"><img src="http://imgur.com/G9mMBFT.png" /></p>
12+
13+
The examples above cover the following technologies:
14+
15+
* [GraphQL](http://graphql.org/)
16+
* [Apollo Client](http://dev.apollodata.com/react/)
17+
* [Relay Modern/Relay Classic](https://facebook.github.io/relay/)
18+
* [Auth0 Lock](https://github.com/auth0/lock)
19+
* [GraphQL subscriptions](https://www.graph.cool/docs/reference/simple-api/subscriptions-aip7oojeiv/)
20+
* [File upload](https://www.graph.cool/docs/reference/file-handling/overview-eer4wiang0/)
21+
* ...
22+
23+
> Are you looking for another example? [Request it here](https://github.com/graphcool-examples/react-graphql/issues/new).
24+
25+
## Tutorials
26+
27+
* [How to use `create-react-app` with GraphQL & Apollo](https://www.graph.cool/docs/tutorials/create-react-apps-with-apollo-client-aidae4aeg5/)
28+
* [Freecom: Building Intercom with GraphQL and Apollo](https://www.graph.cool/docs/tutorials/freecom-overview-intercom-tutorial-e8a6ajt8ax/)
29+
* [User Authentication with Auth0 for React and Apollo](https://www.graph.cool/docs/tutorials/react-apollo-auth0-pheiph4ooj/)
30+
* [Learn Relay](https://www.learnrelay.org/) / [Learn Apollo](https://www.learnapollo.com/)
31+
32+
## Contributors
33+
34+
A big thank you to all contributors and supporters of this repository 💚
35+
36+
<a href="https://github.com/nikolasburk/" target="_blank">
37+
<img src="https://github.com/nikolasburk.png?size=64" width="64" height="64" alt="nikolasburk">
38+
</a>
39+
<a href="https://github.com/schickling/" target="_blank">
40+
<img src="https://github.com/schickling.png?size=64" width="64" height="64" alt="schickling">
41+
</a>
42+
<a href="https://github.com/marktani/" target="_blank">
43+
<img src="https://github.com/marktani.png?size=64" width="64" height="64" alt="marktani">
44+
</a>
45+
<a href="https://github.com/stubailo/" target="_blank">
46+
<img src="https://github.com/stubailo.png?size=64" width="64" height="64" alt="stubailo">
47+
</a>
48+
<a href="https://github.com/kuldarkalvik/" target="_blank">
49+
<img src="https://github.com/kuldarkalvik.png?size=64" width="64" height="64" alt="kuldarkalvik">
50+
</a>
51+
<a href="https://github.com/gsans/" target="_blank">
52+
<img src="https://github.com/gsans.png?size=64" width="64" height="64" alt="gsans">
53+
</a>
54+
<a href="https://github.com/kbrandwijk/" target="_blank">
55+
<img src="https://github.com/kbrandwijk.png?size=64" width="64" height="64" alt="kbrandwijk">
56+
</a>
57+
<a href="https://github.com/fresh5447/" target="_blank">
58+
<img src="https://github.com/fresh5447.png?size=64" width="64" height="64" alt="fresh5447">
59+
</a>
60+
<a href="https://github.com/sebasibarguen/" target="_blank">
61+
<img src="https://github.com/sebasibarguen.png?size=64" width="64" height="64" alt="sebasibarguen">
62+
</a>
63+
<a href="https://github.com/heymartinadams/" target="_blank">
64+
<img src="https://github.com/heymartinadams.png?size=64" width="64" height="64" alt="heymartinadams">
65+
</a>
66+
<a href="https://github.com/100ideas/" target="_blank">
67+
<img src="https://github.com/100ideas.png?size=64" width="64" height="64" alt="100ideas">
68+
</a>
69+
<a href="https://github.com/brene/" target="_blank">
70+
<img src="https://github.com/brene.png?size=64" width="64" height="64" alt="brene">
71+
</a>
72+
<a href="https://github.com/chrisgchambers/" target="_blank">
73+
<img src="https://github.com/chrisgchambers.png?size=64" width="64" height="64" alt="chrisgchambers">
74+
</a>
75+
<a href="https://github.com/wesbos/" target="_blank">
76+
<img src="https://github.com/wesbos.png?size=64" width="64" height="64" alt="wesbos">
77+
</a>
78+
<a href="https://github.com/jurosh/" target="_blank">
79+
<img src="https://github.com/jurosh.png?size=64" width="64" height="64" alt="jurosh">
80+
</a>
81+
<a href="https://github.com/mstruebing/" target="_blank">
82+
<img src="https://github.com/mstruebing.png?size=64" width="64" height="64" alt="mstruebing">
83+
</a>
84+
85+
## Help & Community [![Slack Status](https://slack.graph.cool/badge.svg)](https://slack.graph.cool)
86+
87+
Say hello in our [Slack](http://slack.graph.cool/) or visit the [Graphcool Forum](https://www.graph.cool/forum) if you run into issues or have questions. We love talking to you!
88+
89+
![](http://i.imgur.com/5RHR6Ku.png)
90+
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
.graphcoolrc
4+
5+
# dependencies
6+
node_modules
7+
8+
# testing
9+
coverage
10+
# production
11+
build
12+
13+
# misc
14+
.DS_Store
15+
npm-debug.log
16+
17+
#IDE
18+
.idea/*
19+
*.swp
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2016 Graphcool Examples
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.
Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Email Authentication Example (with React & Apollo)
2+
3+
This is an authentication example based on the simple [Email & Password Authentication](https://github.com/graphcool/templates/tree/master/auth/email-password) template.
4+
5+
## Getting Started
6+
7+
### 1. Download the example
8+
9+
```sh
10+
curl https://codeload.github.com/graphcool-examples/react-graphql/tar.gz/master | tar -xz --strip=1 react-graphql-master/authentication-with-email-and-apollo
11+
cd authentication-with-email-and-apollo/server
12+
```
13+
14+
### 2. Create your Graphcool service
15+
16+
```sh
17+
# Install latest version of the Graphcool CLI
18+
npm install -g graphcool
19+
20+
# Install dependencies and deploy service
21+
yarn install
22+
graphcool deploy
23+
```
24+
25+
When prompted which cluster you want to deploy to, choose any of the **Shared Clusters** options (`shared-eu-west-1`, `shared-ap-northeast-1` or `shared-us-west-2`).
26+
27+
> Note: The service's schema is created based on the type definitions in [`./server/types.graphql`](./server/types.graphql).
28+
29+
30+
#### 3. Connect the app with your GraphQL API
31+
32+
Paste the `Simple API` endpoint from the previous step to `./src/index.js` as the `uri` argument in the `createHttpLink` call:
33+
34+
```js
35+
// replace `__SIMPLE_API_ENDPOINT__` with the endpoint from the previous step
36+
const httpLink = new createHttpLinkHttpLink({ uri: '__SIMPLE_API_ENDPOINT__' })
37+
```
38+
39+
> Note: You can get access to your endpoint using the `graphcool info` command.
40+
41+
42+
### 4. Install dependencies & run locally
43+
44+
Navigate back into the root directory of the project, install the dependencies and run the app:
45+
46+
```sh
47+
cd ..
48+
yarn install
49+
yarn start
50+
```
51+
52+
You can now use the app at `http://localhost:3000`.
53+
54+
## Next steps
55+
56+
* [Documentation](https://docs-next.graph.cool)
57+
* [Advanced GraphQL features](https://www.graph.cool/docs/tutorials/advanced-features-eath7duf7d/)
58+
* [Authentication & Permissions](https://www.graph.cool/docs/reference/authorization/overview-iegoo0heez/)
59+
* [Implementing business logic with serverless functions](https://www.graph.cool/docs/reference/functions/overview-boo6uteemo/)
60+
61+
62+
## Help & Community [![Slack Status](https://slack.graph.cool/badge.svg)](https://slack.graph.cool)
63+
64+
Say hello in our [Slack](http://slack.graph.cool/) or visit the [Graphcool Forum](https://www.graph.cool/forum) if you run into issues or have questions. We love talking to you!
65+
66+
![](http://i.imgur.com/5RHR6Ku.png)
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "react-apollo-email-example",
3+
"version": "0.0.1",
4+
"private": true,
5+
"devDependencies": {
6+
"react-scripts": "^1.0.16"
7+
},
8+
"dependencies": {
9+
"apollo-cache-inmemory": "^1.0.0",
10+
"apollo-client": "^2.0.1",
11+
"apollo-link": "^1.0.0",
12+
"apollo-link-http": "^1.1.0",
13+
"graphql": "^0.11.7",
14+
"graphql-tag": "^2.5.0",
15+
"react": "^16.0.0",
16+
"react-apollo": "^2.0.0",
17+
"react-dom": "^16.0.0",
18+
"react-router-dom": "^4.2.2",
19+
"tachyons": "^4.9.0"
20+
},
21+
"scripts": {
22+
"start": "react-scripts start",
23+
"build": "react-scripts build",
24+
"test": "react-scripts test --env=jsdom",
25+
"eject": "react-scripts eject"
26+
},
27+
"eslintConfig": {
28+
"extends": "./node_modules/react-scripts/config/eslint.js"
29+
}
30+
}
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* /index.html 200
2.85 KB
Binary file not shown.
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="shortcut icon" href="./favicon.ico">
7+
<title>Instagram</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<!--
12+
This HTML file is a template.
13+
If you open it directly in the browser, you will see an empty page.
14+
15+
You can add webfonts, meta tags, or analytics to this file.
16+
The build step will place the bundled scripts into the <body> tag.
17+
18+
To begin the development, run `npm start` in this folder.
19+
To create a production bundle, use `npm run build`.
20+
-->
21+
</body>
22+
</html>
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
# Welcome to Graphcool!
2+
#
3+
# This file is the main config file for your Graphcool Service.
4+
# It's very minimal at this point and uses default values.
5+
# We've included a hello world function here.
6+
# Just run `graphcool deploy` to have the first running Graphcool Service.
7+
#
8+
# Check out some examples:
9+
# github.com/graphcool/examples
10+
#
11+
# Here are the reference docs of this definition format:
12+
# https://docs-next.graph.cool/reference/basics/project-configuration-opheidaix3
13+
#
14+
# Happy Coding!
15+
16+
17+
# In the types.graphql you define your data schema
18+
types: ./types.graphql
19+
20+
21+
functions:
22+
23+
# added by email-password template:
24+
signup:
25+
type: resolver
26+
schema: src/email-password/signup.graphql
27+
handler:
28+
code: src/email-password/signup.js
29+
30+
authenticate:
31+
type: resolver
32+
schema: src/email-password/authenticate.graphql
33+
handler:
34+
code: src/email-password/authenticate.js
35+
36+
loggedInUser:
37+
type: resolver
38+
schema: src/email-password/loggedInUser.graphql
39+
handler:
40+
code: src/email-password/loggedInUser.js
41+
42+
43+
44+
# Model/Relation permissions are used to limit the API access
45+
# To take the burden of thinking about those while development, we
46+
# preconfigured the wildcard ("*") permission that allows everything
47+
# Read more here:
48+
# https://docs-next.graph.cool/reference/auth/authorization/overview-iegoo0heez
49+
permissions:
50+
# Everyone can read posts
51+
- operation: Post.read
52+
# Only authenticated users can create posts
53+
- operation: Post.create
54+
authenticated: true
55+
# Only the author of a post can update it
56+
- operation: Post.update
57+
authenticated: true
58+
query: ./permissions/updateOrDeletePost.graphql
59+
# Only the author of a post can delete it
60+
- operation: Post.delete
61+
authenticated: true
62+
query: ./permissions/updateOrDeletePost.graphql
63+
# Everyone can read the id, name and email fields of users
64+
- operation: User.read
65+
fields:
66+
- id
67+
- name
68+
- email
69+
# Only authenticated users can create relation between a user and a post
70+
- operation: UserPosts.connect
71+
authenticated: true
72+
73+
74+
# Your root tokens used for functions to get full access to the API
75+
# Read more here:
76+
# https://docs-next.graph.cool/reference/auth/authentication/authentication-tokens-eip7ahqu5o
77+
rootTokens:
78+
- mytoken
79+

0 commit comments

Comments
 (0)