Skip to content
Instagram clone using apollo, react and graphQl (hasura-graphQl engine)
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit d2dbf9c Sep 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public implement likes, feed, profile Aug 25, 2019
src deploy Aug 29, 2019
.gitignore Initial commit from Create React App Aug 20, 2019
README.md Update README.md Sep 21, 2019
package-lock.json gh-pages Aug 29, 2019
package.json deploy Aug 29, 2019

README.md

Instagram Clone using React, Apollo-React-Client and Hasura GraphQl Engine

See live demo here. This application demonstrates consuming GraphQl Api provided by Hasura GraphQL Engine using a react app. Uses react-apollo GraphQL client to make requests to the api. Users can create account using Auth0 JWT authentication which is then verified by Hasura. React-router is used to provide SPA experience.

Authenticated users can:

  • Create new posts
  • Like posts
  • Follow user profiles
  • Realtime updates when other users upvote a post, create a new post or follow user profile (updating apollo cache).

Installation

Installing and running on local system require:

  • Setting up Hasura Server (deployed on Heroku), and creating required tables
  • Setting up Auth0
  • See this guide for Auth0 JWT Integration with Hasura
  • Clone or download this repo, install the required packages and run npm start

npm packages:

You will need the following npm packages:

Creating tables

Following tables required to be created:

type Post {
id - integer, primary key
caption - text
url - text
created_at - timestamp with time zone
user_id - text
}
 
type User {
name - text
last_seen - timestamp with time zone
avatar - text
email - text
id - text, primary key
}

type Like {
id - integer, primary key
user_id - text
post_id - integer
}

type Follow {
id - integer, primary key
follower_id - text
following_id - text
}

Post.user_id and User.id have object relationship in table Post and array relationship in table User. Like.post_id and Post.id have array relationship in table Post. Row and Column permissions should be given accordingly.

User Authentication

See Setting up Auth0 with react and this guide for Auth0 JWT Integration with Hasura. Here we are using Auth0 Universal Login.

Realtime updates

Using apollo cache and react state, we can give realtime updates for likes, new posts and follows. Apollo refetchQueries function updates apollo cache with refetched data.

Preview

App: App

User Profile: User Profile

You can’t perform that action at this time.