https://github.com/alan345/real-time-map-react-graphql
https://github.com/alan345/real-time-map-react-graphql
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/alan345/real-time-map-react-graphql
- Owner: alan345
- Created: 2017-10-20T20:15:37.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-22T16:44:44.000Z (over 8 years ago)
- Last Synced: 2025-02-07T13:38:35.001Z (over 1 year ago)
- Language: JavaScript
- Size: 1.03 MB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Subscriptions Example (with React & Apollo)
A realtime chat application that displays the locations of all the chat participants on a map.
* [React](https://facebook.github.io/react/): Frontend framework for building user interfaces
* [Apollo Client](https://github.com/apollographql/apollo-client): Fully-featured, production ready caching GraphQL client
* [Graphcool](https://www.graph.cool): Flexible backend platform combining GraphQL + AWS Lambda
## Getting Started
Subscriptions allow you to bring realtime functionality into your app. You can learn more about subscriptions in our [docs](https://www.graph.cool/docs/reference/simple-api/subscriptions-aip7oojeiv/).
### 1. Clone example repository
```sh
git clone https://github.com/graphcool-examples/react-graphql.git
cd react-graphql/subscriptions-with-apollo-worldchat
```
### 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@next
# 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 Traveller @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)
name: String!
location: Location! @relation(name: "TravellerLocation")
messages: [Message!]! @relation(name: "MessagesFromTraveller")
}
type Message @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)
text: String!
sentBy: Traveller! @relation(name: "MessagesFromTraveller")
}
type Location @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)
traveller: Traveller! @relation(name: "TravellerLocation")
latitude: Float!
longitude: Float!
}
```
### 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
```
Save the HTTP endpoint for the `Simple API` from the output as well as the websocket endpoint for the `Subscriptions API`, you'll need them 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.
### 5. Connect the app with your GraphQL API
#### 5.1. Simple API
Copy the `Simple API` endpoint to `./src/App.js` as the `uri` argument in the `createNetworkInterface` call:
```js
const networkInterface = createNetworkInterface({ uri: '__SIMPLE_API_ENDPOINT__' })
```
#### 5.2. Subscriptions API
Copy the `Subscriptions API` endpoint to `./src/App.js` as the argument for the constructor of the `SubscriptionClient`:
```js
const wsClient = new SubscriptionClient('__SUBSCRIPTIONS_API_ENDPOINT__')
```
> **Note**: If you ever lose your endpoints, you can get access to them again with the `graphcool info` command.
### 6. Install dependencies & run locally
You're done configuring the example application.
```sh
yarn install
yarn start # open browser with: http://localhost:3000
```
### 7. Further resources
This app demonstrates how to use the Graphcool subscription API using Apollo Client. You can learn more about these technologies here:
- [**Tutorial:** How to build a Real-Time Chat with GraphQL Subscriptions and Apollo](https://www.graph.cool/docs/tutorials/worldchat-subscriptions-example-ui0eizishe/)
- [**Video:** How to build a Real-Time Chat with GraphQL Subscriptions and Apollo](https://www.youtube.com/watch?v=aSLF9f13o2c)
- [**Docs:** Using GraphQL Subscriptions with Graphcool](https://www.graph.cool/docs/reference/simple-api/generated-subscriptions-aip7oojeiv)
- [**Blog Post**: GraphQL Subscriptions in Apollo Client](https://dev-blog.apollodata.com/graphql-subscriptions-in-apollo-client-9a2457f015fb#.458zrl2u7)
## 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!
