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

• Authentication
• [File Upload] (#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/graphQlServer.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 includes an example on how to use rootValue for retrieving restricted data in its posts field.

Client

• /client/mutation/LoginMutation.js contains the client side login mutation.
• /client/pages/user/login/login.js utilizes this mutation.
• /client/pages/user/posts/UserPosts.js displays restricted user data.

File Upload

Client

• /client/mutation/CreatePostMutation.js uses getFiles() to pass file data to the GraphQL server.
• /client/pages/user/createPost/CreatePost.js uses this mutation by passing it a File object retrieved from a HTML input element

Server

• /server/graphQlServer.js contains a wrapper around multer middleware, which saves the image to disk and passes its file name to GraphQL. See this comment for more information.

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 test:server

update-schema

$ npm 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