{"id":19280986,"url":"https://github.com/islamhaqq/graphcool-instagram-clone","last_synced_at":"2026-05-08T02:08:42.371Z","repository":{"id":91303009,"uuid":"62300716","full_name":"islamhaqq/GraphCool-Instagram-Clone","owner":"islamhaqq","description":"An Instagram clone using React, Apollo, and GraphQL with the help of the Graphcool framework","archived":false,"fork":false,"pushed_at":"2017-11-02T14:20:48.000Z","size":1231,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-05T16:44:40.935Z","etag":null,"topics":["apollo","graphcool","graphql","javascript","react"],"latest_commit_sha":null,"homepage":"https://syedaman.github.io/GraphCool-Instagram-Clone/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/islamhaqq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2016-06-30T10:03:53.000Z","updated_at":"2017-11-02T14:40:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"8bc21606-3ebf-4b4e-905b-3d63fb81d883","html_url":"https://github.com/islamhaqq/GraphCool-Instagram-Clone","commit_stats":null,"previous_names":["islamhaqq/graphcool-instagram-clone"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/islamhaqq%2FGraphCool-Instagram-Clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/islamhaqq%2FGraphCool-Instagram-Clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/islamhaqq%2FGraphCool-Instagram-Clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/islamhaqq%2FGraphCool-Instagram-Clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/islamhaqq","download_url":"https://codeload.github.com/islamhaqq/GraphCool-Instagram-Clone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240385413,"owners_count":19793010,"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":["apollo","graphcool","graphql","javascript","react"],"created_at":"2024-11-09T21:21:15.033Z","updated_at":"2026-05-08T02:08:37.344Z","avatar_url":"https://github.com/islamhaqq.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React \u0026 Apollo Quickstart\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): Backend development framework based on GraphQL + Serverless\n\n## Example\n\n![](http://imgur.com/3S6fUeI.gif)\n\n## Quickstart\n\n\u003e For more information on how to get started refer to the full \"React \u0026 Apollo\"-[tutorial](https://www.graph.cool/docs/quickstart/frontend/react/apollo-tijghei9go/) or watch the corresponding [video](https://www.youtube.com/watch?v=OoPQl8hcIug).\n\n### 1. Clone example repository\n\n```sh\ngit clone https://github.com/graphcool-examples/react-graphql.git\ncd react-graphql/quickstart-with-apollo\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\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 Post @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  description: String!\n  imageUrl: String!\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\nWhen 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`).\n\nSave the HTTP endpoint for the `Simple API` from the output, you'll need it 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 frontend app with your GraphQL API\n\nPaste the `Simple API` endpoint from the previous step to `./src/index.js` as the `uri` argument in the `HttpLink` constructor call:\n\n```js\n// replace `__SIMPLE_API_ENDPOINT__` with the endpoint from the previous step\nconst httpLink = new HttpLink({ uri: '__SIMPLE_API_ENDPOINT__' })\n```\n\n\u003e **Note**: If you ever lose your endpoint, you can get access to it again with the `graphcool info` command.\n\n### 6. Install dependencies \u0026 run locally\n\n```sh\ncd ..\nyarn install\nyarn start # open http://localhost:3000 in your browser\n```\n\n## Next steps\n\n* [Documentation](https://docs-next.graph.cool)\n* [Advanced GraphQL features](https://www.graph.cool/docs/tutorials/advanced-features-eath7duf7d/)\n* [Authentication \u0026 Permissions](https://www.graph.cool/docs/reference/authorization/overview-iegoo0heez/)\n* [Implementing business logic with serverless functions](https://www.graph.cool/docs/reference/functions/overview-boo6uteemo/)\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\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fislamhaqq%2Fgraphcool-instagram-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fislamhaqq%2Fgraphcool-instagram-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fislamhaqq%2Fgraphcool-instagram-clone/lists"}