文件列表:

package-lock.json (532275, 2021-09-13)
package.json (1044, 2021-09-13)
public/ (0, 2021-09-13)
public/favicon.ico (3870, 2021-09-13)
public/index.html (2084, 2021-09-13)
public/manifest.json (306, 2021-09-13)
src/ (0, 2021-09-13)
src/App.test.js (259, 2021-09-13)
src/auth/ (0, 2021-09-13)
src/auth/auth_config.json (184, 2021-09-13)
src/auth/react-auth0-wrapper.js (2524, 2021-09-13)
src/components/ (0, 2021-09-13)
src/components/App.js (2085, 2021-09-13)
src/components/NewPost.js (2418, 2021-09-13)
src/components/Post.js (1881, 2021-09-13)
src/components/PostList.js (994, 2021-09-13)
src/components/Profile.js (994, 2021-09-13)
src/components/SecuredRoute.js (493, 2021-09-13)
src/components/header.js (1598, 2021-09-13)
src/index.js (1005, 2021-09-13)
src/logo.svg (2671, 2021-09-13)
src/serviceWorker.js (4951, 2021-09-13)
src/styles/ (0, 2021-09-13)
src/styles/App.css (492, 2021-09-13)
src/styles/index.css (908, 2021-09-13)

# HackerNews Clone using React, Apollo-React-Client and Hasura GraphQl Engine Note: This project was build as a part of a tutorial blog post, check out the tutorial [here](https://hasura.io/blog/hackernews-tutorial-using-graphql-react-hasura-part1/). [Live Demo](https://hackernews-1919.herokuapp.com/) This application demonstrates consuming GraphQl Api provided by [Hasura GraphQL Engine](https://hasura.io) using a react app. Uses react-apollo GraphQL client to make requests to the api. Users can create account using [Auth0 JWT authentication](https://auth0.com/) which is then verified by Hasura. React-router is used to provide SPA experience. Authenticated users can: * Create new posts * Upvote posts * Realtime updates when other users upvote a post or create a new one (updating apollo cache). ## Installation Installing and running on local system require: * [Setting up Hasura Server](https://docs.hasura.io/1.0/graphql/manual/getting-started/heroku-simple.html) (deployed on Heroku), and creating required tables * [Setting up Auth0](https://auth0.com/docs/quickstart/spa/react/01-login#configure-auth0) * See [this](https://docs.hasura.io/1.0/graphql/manual/guides/integrations/auth0-jwt.html) 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: * [react-router-dom](https://www.npmjs.com/package/react-router-dom) * [react-bootstrap](https://www.npmjs.com/package/react-bootstrap) * [apollo-boost](https://www.npmjs.com/package/apollo-boost) * [@apollo/react-hooks](https://www.npmjs.com/package/@apollo/react-hooks) * [apollo-link-context](https://www.npmjs.com/package/apollo-link-context) * [@apollo/react-hoc](https://www.npmjs.com/package/@apollo/react-hoc) * [graphql](https://www.npmjs.com/package/graphql) * [@auth0/auth0-spa-js](https://www.npmjs.com/package/@auth0/auth0-spa-js) ## Creating tables Following tables required to be created: ``` type Post { id - integer, primary key description - text url - text created_at - timestamp with time zone user_id - text } type Users { name - text last_seen - timestamp with time zone id - text, primary key } type Point { id - integer, primary key user_id - text post_id - integer } ``` `Post.user_id` and `Users.id` have object relationship. `Point.post_id` and `Post.id` have array relationship. Permissions should be given accordingly. ## User Authentication See [Setting up Auth0 with react](https://auth0.com/docs/quickstart/spa/react/01-login#configure-auth0) and [this](https://docs.hasura.io/1.0/graphql/manual/guides/integrations/auth0-jwt.html) 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 upvotes and new posts. Apollo `refetchQueries` function updates apollo cache with refetched data.

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：