Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/islamhaqq/graphcool-instagram-clone
An Instagram clone using React, Apollo, and GraphQL with the help of the Graphcool framework
https://github.com/islamhaqq/graphcool-instagram-clone
apollo graphcool graphql javascript react
Last synced: 5 days ago
JSON representation
An Instagram clone using React, Apollo, and GraphQL with the help of the Graphcool framework
- Host: GitHub
- URL: https://github.com/islamhaqq/graphcool-instagram-clone
- Owner: islamhaqq
- License: mit
- Created: 2016-06-30T10:03:53.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-02T14:20:48.000Z (about 7 years ago)
- Last Synced: 2024-09-13T15:42:36.637Z (2 months ago)
- Topics: apollo, graphcool, graphql, javascript, react
- Language: JavaScript
- Homepage: https://syedaman.github.io/GraphCool-Instagram-Clone/
- Size: 1.17 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React & Apollo Quickstart
* [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): Backend development framework based on GraphQL + Serverless
## Example
## Quickstart
> For more information on how to get started refer to the full "React & Apollo"-[tutorial](https://www.graph.cool/docs/quickstart/frontend/react/apollo-tijghei9go/) or watch the corresponding [video](https://www.youtube.com/watch?v=OoPQl8hcIug).
### 1. Clone example repository
```sh
git clone https://github.com/graphcool-examples/react-graphql.git
cd react-graphql/quickstart-with-apollo
```
### 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 `Simple 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.
### 5. Connect the frontend app with your GraphQL API
Paste the `Simple API` endpoint from the previous step to `./src/index.js` as the `uri` argument in the `HttpLink` constructor call:
```js
// replace `__SIMPLE_API_ENDPOINT__` with the endpoint from the previous step
const httpLink = new HttpLink({ uri: '__SIMPLE_API_ENDPOINT__' })
```
> **Note**: If you ever lose your endpoint, you can get access to it again with the `graphcool info` command.
### 6. Install dependencies & run locally
```sh
cd ..
yarn install
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!
