An example app demonstrating role based authentication and file upload with Relay and GraphQL.

• Authentication
• File Upload
• Getting Started
• Commands
  • test
  • update-schema
• Credits and Further Information
• Changelog

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 [email protected], [email protected] or [email protected] 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

Authentication

• Issue on Relay
• Answer on stackoverflow
• Question on stackoverflow

File Upload

• Comment on Relay issue by murz

Changelog