Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JulianSuringa/quickstart-relay-modern
CRUD relay modern
https://github.com/JulianSuringa/quickstart-relay-modern
Last synced: 8 days ago
JSON representation
CRUD relay modern
- Host: GitHub
- URL: https://github.com/JulianSuringa/quickstart-relay-modern
- Owner: JulianSuringa
- Created: 2017-12-21T09:11:22.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-21T11:39:31.000Z (almost 7 years ago)
- Last Synced: 2024-08-01T21:50:06.954Z (4 months ago)
- Language: JavaScript
- Size: 103 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Quickstart with Relay Modern
* [React](https://facebook.github.io/react/): Frontend framework for building user interfaces
* [Relay](https://facebook.github.io/relay/): Powerful GraphQL client developed by Facebook
* [Graphcool](https://www.graph.cool): Backend development framework based on GraphQL + Serverless
## Example
## Quickstart
### 1. Clone example repository
```sh
git clone https://github.com/JulianSuringa/quickstart-relay-modern.git quickstart-relay-modern
cd quickstart-relay-modern
```
### 2. Create Graphcool service with the [Graphcool CLI](https://docs-next.graph.cool/reference/graphcool-cli/overview-zboghez5go)
```sh
# Install Graphcool Framework CLI
npm install -g graphcool
# Create a new service inside a directory called `server`
graphcool init server
```
This created the following file structure in the current directory:
```
.
└── server
├── graphcool.yml
├── types.graphql
└── src
├── hello.graphql
└── hello.js
```
### 3. Define data model
Next, you need to define your data model inside the newly created `types.graphql`-file.
Replace the current contents in `types.graphql` with the following type definition (you can delete the predefined `User` type):
```graphql
type Post @model {
# Required system field
id: ID! @isUnique # read-only (managed by Graphcool)
# Optional system fields (remove if not needed)
createdAt: DateTime! # read-only (managed by Graphcool)
updatedAt: DateTime! # read-only (managed by Graphcool)
description: String!
imageUrl: String!
}
```
### 4. Deploy the GraphQL server
You're now ready to put your Graphcool service into production! Navigate into the `server` directory and [deploy](https://docs-next.graph.cool/reference/graphcool-cli/commands-aiteerae6l#graphcool-deploy) the service:
```sh
cd server
graphcool deploy
```
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`).
Save the HTTP endpoint for the `Relay API` from the output, you'll need it in the next step.
> **Note**: You can now test your GraphQL API inside a GraphQL playground. Simply type the `graphcool playground` command and start sending queries and mutations. Note that the Playground by default is running against the `Simple API` but can easily be adjusted to use the `Relay API`.
### 5. Connect the app with your GraphQL API
Paste the `Relay API` endpoint to `./src/createRelayEnvironment.js` as the argument for the call to `fetch` replacing `__RELAY_API_ENDPOINT__ `:
```js
// replace `__RELAY_API_ENDPOINT__ ` with the endpoint from the previous step
return fetch('__RELAY_API_ENDPOINT__', {
...
})
```
> **Note**: If you ever lose your endpoint, you can get access to it again with the `graphcool info` command.6
### 6. Install dependencies & run locally
```sh
cd ..
yarn install
yarn relay # invoke relay compiler
yarn start # open http://localhost:3000 in your browser
```
## Next steps
* [Documentation](https://docs-next.graph.cool)
* [Advanced GraphQL features](https://www.graph.cool/docs/tutorials/advanced-features-eath7duf7d/)
* [Authentication & Permissions](https://www.graph.cool/docs/reference/authorization/overview-iegoo0heez/)
* [Implementing business logic with serverless functions](https://www.graph.cool/docs/reference/functions/overview-boo6uteemo/)
## Help & Community [](https://slack.graph.cool)
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!
