{"id":15862753,"url":"https://github.com/alan345/real-time-map-react-graphql","last_synced_at":"2025-10-11T15:42:38.078Z","repository":{"id":131657781,"uuid":"107722296","full_name":"alan345/real-time-map-react-graphql","owner":"alan345","description":null,"archived":false,"fork":false,"pushed_at":"2017-10-22T16:44:44.000Z","size":1078,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-07T13:38:35.001Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alan345.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-20T20:15:37.000Z","updated_at":"2022-06-19T03:05:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"e7b92603-4f27-4fa5-95eb-a4b2f0e1d1aa","html_url":"https://github.com/alan345/real-time-map-react-graphql","commit_stats":{"total_commits":201,"total_committers":21,"mean_commits":9.571428571428571,"dds":0.572139303482587,"last_synced_commit":"fb0c675dae9599e24e2a6f927a56670de4363a4f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan345%2Freal-time-map-react-graphql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan345%2Freal-time-map-react-graphql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan345%2Freal-time-map-react-graphql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan345%2Freal-time-map-react-graphql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alan345","download_url":"https://codeload.github.com/alan345/real-time-map-react-graphql/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246709918,"owners_count":20821298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-05T22:42:14.346Z","updated_at":"2025-10-11T15:42:33.047Z","avatar_url":"https://github.com/alan345.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Subscriptions Example (with React \u0026 Apollo)\n\nA realtime chat application that displays the locations of all the chat participants on a map.\n\n![Worldchat](http://i.imgur.com/8cpv7Hi.png)\n\n* [React](https://facebook.github.io/react/): Frontend framework for building user interfaces\n* [Apollo Client](https://github.com/apollographql/apollo-client): Fully-featured, production ready caching GraphQL client\n* [Graphcool](https://www.graph.cool): Flexible backend platform combining GraphQL + AWS Lambda\n\n## Getting Started\n\nSubscriptions 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/).\n\n\n### 1. Clone example repository\n\n```sh\ngit clone https://github.com/graphcool-examples/react-graphql.git\ncd react-graphql/subscriptions-with-apollo-worldchat\n```\n\n### 2. Create Graphcool service with the [Graphcool CLI](https://docs-next.graph.cool/reference/graphcool-cli/overview-zboghez5go)\n\n```sh\n# Install Graphcool Framework CLI\nnpm install -g graphcool@next\n\n# Create a new service inside a directory called `server`\ngraphcool init server\n```\n\nThis created the following file structure in the current directory:\n\n```\n.\n└── server\n    ├── graphcool.yml\n    ├── types.graphql\n    └── src\n        ├── hello.graphql\n        └── hello.js\n```\n\n### 3. Define data model\n\nNext, you need to define your data model inside the newly created `types.graphql`-file.\n\nReplace the current contents in `types.graphql` with the following type definition (you can delete the predefined `User` type):\n\n```graphql\ntype Traveller @model {\n  # Required system field\n  id: ID! @isUnique # read-only (managed by Graphcool)\n\n  # Optional system fields (remove if not needed)\n  createdAt: DateTime! # read-only (managed by Graphcool)\n  updatedAt: DateTime! # read-only (managed by Graphcool)\n\n  name: String!\n  location: Location! @relation(name: \"TravellerLocation\")\n  messages: [Message!]! @relation(name: \"MessagesFromTraveller\")\n}\n\ntype Message @model {\n  # Required system field\n  id: ID! @isUnique # read-only (managed by Graphcool)\n\n  # Optional system fields (remove if not needed)\n  createdAt: DateTime! # read-only (managed by Graphcool)\n  updatedAt: DateTime! # read-only (managed by Graphcool)\n\n  text: String!\n  sentBy: Traveller!  @relation(name: \"MessagesFromTraveller\")\n}\n\ntype Location @model {\n  # Required system field\n  id: ID! @isUnique # read-only (managed by Graphcool)\n\n  # Optional system fields (remove if not needed)\n  createdAt: DateTime! # read-only (managed by Graphcool)\n  updatedAt: DateTime! # read-only (managed by Graphcool)\n\n  traveller: Traveller! @relation(name: \"TravellerLocation\")\n  latitude: Float!\n  longitude: Float!\n}\n```\n\n### 4. Deploy the GraphQL server\n\nYou'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:\n\n```sh\ncd server\ngraphcool deploy\n```\n\nSave 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.\n\n\u003e **Note**: You can now test your GraphQL API inside a GraphQL playground. Simply type the `graphcool playground` command and start sending queries and mutations.\n\n### 5. Connect the app with your GraphQL API\n\n#### 5.1. Simple API\n\nCopy the `Simple API` endpoint to `./src/App.js` as the `uri` argument in the `createNetworkInterface` call:\n\n```js\nconst networkInterface = createNetworkInterface({ uri: '__SIMPLE_API_ENDPOINT__' })\n```\n\n#### 5.2. Subscriptions API\n\nCopy the `Subscriptions API` endpoint to `./src/App.js` as the argument for the constructor of the `SubscriptionClient`:\n\n```js\nconst wsClient = new SubscriptionClient('__SUBSCRIPTIONS_API_ENDPOINT__')\n```\n\n\u003e **Note**: If you ever lose your endpoints, you can get access to them again with the `graphcool info` command.\n\n### 6. Install dependencies \u0026 run locally\n\nYou're done configuring the example application. \n\n```sh\nyarn install\nyarn start # open browser with: http://localhost:3000\n```\n\n### 7. Further resources\n\nThis app demonstrates how to use the Graphcool subscription API using Apollo Client. You can learn more about these technologies here:\n\n- [**Tutorial:** How to build a Real-Time Chat with GraphQL Subscriptions and Apollo](https://www.graph.cool/docs/tutorials/worldchat-subscriptions-example-ui0eizishe/)\n- [**Video:** How to build a Real-Time Chat with GraphQL Subscriptions and Apollo](https://www.youtube.com/watch?v=aSLF9f13o2c)\n- [**Docs:** Using GraphQL Subscriptions with Graphcool](https://www.graph.cool/docs/reference/simple-api/generated-subscriptions-aip7oojeiv)\n- [**Blog Post**: GraphQL Subscriptions in Apollo Client](https://dev-blog.apollodata.com/graphql-subscriptions-in-apollo-client-9a2457f015fb#.458zrl2u7)\n\n\n## Help \u0026 Community [![Slack Status](https://slack.graph.cool/badge.svg)](https://slack.graph.cool)\n\nSay 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!\n\n![](http://i.imgur.com/5RHR6Ku.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falan345%2Freal-time-map-react-graphql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falan345%2Freal-time-map-react-graphql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falan345%2Freal-time-map-react-graphql/lists"}