Piecing Together GraphQL

GraphQL’s concept spans from data store to client. What happens along the way? Tooling in the world has come a long way and spinning up an application is easier than ever. By stepping through each component, you’ll have a better understanding of GraphQL as a whole. GraphQL To follow along with this tutorial, clone this . It’s a bare-bones app using sessions to authenticate users, a battle tested and secure option for persisting user auth. fullstack example Our Stack Image from https://www.howtographql.com Looking at the image above from left to right, the first represents our client application built on (our GraphQL data cache) and . I’m using to build the client bundle. Apollo React Parcel Next, the “GraphQL Server” will be , a server based on which interfaces with Apollo and provides us with a lot of sensible defaults. graphql-yoga Express will stand between the server and the database as our data layer, similar to an ORM for writing and accessing data to and from our database. Prisma is open source and supports all of the major (the stack of pancake on the right of the image). Prisma databases Setup Start by installing some global packages. yarn global add prisma graphql-cli nodemon Create a file in our project folder, we’ll fill in the DB_URL variable once we deploy Prisma: .env APP_SECRET=mysecret123DB_URL= Next, create a then log into the Prisma CLI with so you can spin up free dev servers for your projects. Don’t worry, Prisma can be moved to the hardware of your choice at any time and won’t lock you in. Prisma account prisma login We’re going to generate our user models and deploy them to our test database. Inside of you’ll see we have one model, . When we deploy, Prisma will create the bindings based on this schema. Our in the root of our project will explain to Prisma how we want our setup deployed. Now, run: /database User .graphqlconfig.yml prisma deploy database Select “ , choose whichever region makes sense, enter a name like “ and set the stage as “ . Prisma will generate an endpoint like , drop it into your . Demo server” fullstack” dev” [https://us1.prisma.sh/_myusername-12345_/fullstack/dev](https://us1.prisma.sh/myusername-2acca9a/my-project/dev.) .env One last thing, Prisma will comment out your to: database/prisma.yml endpoint: #endpoint: ${env:DB_URL} [https://us1.prisma.sh/myusername-12345/fullstack/dev](https://us1.prisma.sh/myusername-2acca9a/my-project/dev.) ... So switch it back to: endpoint: ${env:DB_URL} ... How it’ll Work After installing dependencies with or fire it up your local server with and navigate to . The command will simultaneously run our server and frontend build. yarn install npm install npm run dev localhost:1234 dev Try Out Sign up and Log in! After a user is successfully created, it will kick you to the dashboard. Once you’re logged in, the protected routes won’t allow authenticated users to the or routes. Once logged out, you can’t go to . /signup /login /dashboard Try refreshing while logged in. On page load the app will make a request to check user’s authentication state. If authenticated, the page will then fetch the user’s data. The Backend Open you’ll see the server instantiated with . It takes a number of arguments: /src/index.js graphql-yoga GraphQLServer : This is our GraphQL schema. Inside the file you’ll see we’ve listed the queries and mutations that will be handled by our resolvers. Typedefs : These are the methods that do the work of logging in, fetching our user, etc. Their inputs and return values must match up with what’s defined in our typeDef’s . Resolvers schema.graphql this takes a function that we’ll use to set the database to point to our Prisma set up. Pass in the generated typeDefs from the as well as the endpoint and secret from our . Context: prisma deploy .env As mentioned above, is based on Express so we can use common packages like to handle our sessions. graphql-yoga express-session After we define our sessions implementation, we start the server with CORS settings that allow our frontend on (via parcel) to get our session cookies. localhost:1234 The Client Side Our front end is a barebones React application bundled up with Parcel. Starting in we set up the to connect to our server running on port and assign the client to our . client/index.jsx ApolloClient 4000 ApolloProvider In the component you’ll see we’re calling the query which checks if there’s a session on the backend. It’ll determine whether to show the links or . Header GET_AUTH_STATUS login / signup logout Further down in you’ll see protected routes for our and auth routes. I created a special route component, , which calls to decide whether to display the corresponding component. Even though we call our auth status query in a few different places, when you open “ ” in developer tools you’ll see that it is only requested once. This is because Apollo Cache handles the data between different components . index.jsx Dashboard ProtectedRoute GET_AUTH_STATUS Network automatically The component handles both our signup and login mutations. On successful login or signup, we need to update our because and mutations only return the User object. Instead of making another request for auth status, we’ll just update the status manually: Auth GET_AUTH_STATUS LOGIN SIGNUP update={(cache) => {cache.writeQuery({query: GET_AUTH_STATUS,data: {isLoggedIn: {status: true,__typename: 'AuthStatus',},},});}} Wrap Up Now’s a good time to dive in to GraphQL if you’ve been watching from the sidelines. The GraphQL eco-system has come a long way in the few years it’s been around. Each of the layers in the stack has matured enough that it’s relatively straightforward to build an app from top to bottom. Also, interest is on the rise. The most recent “ ” reflects this sentiment and we’ll only see more in the future. State of Javascript Well, can explain better than me, but suffice to say using server side sessions to save sensitive data is safer (and easy). Why not store JWTs in local storage or cookies? these articles Again, here’s a link to the example . repository