An example app demonstrating role based authentication and file upload with Relay and GraphQL.
Overview
Users may have a role of type reader, publisher or admin. Readers can access a list of all posts and their own profile. Publishers can additionally create posts and see a list of their own posts. Admin role is not used widely yet.
Authentication
Uses cookie-session and jsonwebtoken to save session data in form of a JSON Web Token in a cookie. This data contains the users id and its role and is made available as rootValue in GraphQL schema.
Server
- /server/graphql/sessionMiddleware.js contains the express middleware used to get session data from the cookie.
- /graphql/mutation/LoginMutation.js contains the GraphQL mutation type for logging in.
- /graphql/type/UserType.js in combination with with the getPostsForCreator method in /data/Database.js include an example on how to use rootValue for retrieving restricted data in its posts field. There are other examples in Database.js like the createPost method
Client
- /client/mutation/LoginMutation.js contains the client side login mutation.
- /client/pages/user/Login.js utilizes this mutation.
- /client/pages/user/UserPosts.js displays restricted user data.
File Upload
Client
- /client/fetchQuery.js adds files to form data to send to GraphQL server.
- /client/mutation/CreatePostMutation.js sets uploadables, which is used in fetchQuery.
- /client/pages/user/createPost/CreatePost.js uses this mutation by passing it a File object retrieved from a HTML input element
Server
- /server/grapqhql/uploadMiddleware.js contains a wrapper around multer middleware, which saves the image to disk and sets its URL as the image field of the GraphQL input. See this comment for more information.
- /server/graphql/mutation/CreatePostMutation.js uses the image field to save the new post including the URL of the uploaded image.
Getting Started
$ npm install
Start the local dev server:
$ npm start
Navigate to http://localhost:3000/ to view the app. Login with email reader@test.com, publisher@test.com or publisher2@test.com and password qwerty.
Commands
test
$ npm run test:server
update-schema
$ npm run update-schema
Credits and Further Information
Based on Essential React starter kit