Welcome! Today, we're going to learn how to build a fullstack GraphQL app using the Apollo platform. Let's get started! 🚀
Since we have a lot of material to cover, we're going to complete all the exercises within the browser. This ensures that we minimize our time spent on environment setup and maximize our time learning cool stuff about GraphQL.
Here are the accounts you'll need for today:
You'll also need to install Apollo DevTools for Chrome. If you have all 4 of these things, then we're ready to begin!
If you need to reference the slides, you can view them here.
Please take the post-workshop survey!! Your honesty is important to helping me improve for next time: https://forms.gle/17ktSPBNo82VwuPFA
Welcome to the server portion of the workshop! We will be building a GraphQL server based on the Movie DB REST API.
server.js: Where all the magic happens to set up Apollo Serverschema.js: Your GraphQL schema goes hereresolvers/: Write your resolvers for each type in this folderdata-sources/: Your data sources separate out the data fetching logic from your resolvers
- Click the button above to navigate to the CodeSandbox. Fork it to your account by clicking Fork in the top menu.
- That's it! CodeSandbox features HMR, a console, and a test runner. It's pretty awesome. 😍 If you see an error message, don't worry - it's because we haven't built our server yet.
If you get stuck at any time, click the sandbox for the exercise you want and fork it.
00-start: Your starting point01-apollo-server: Setting up Apollo Server02-schema: Writing your schema03-data-sources: Building data sources04-authentication: Implementing authentication05-final: Hooking everything up to resolvers
- Clone the repo:
git clone https://github.com/apollographql/fullstack-workshop-server - Then, make a
.envfile with anENGINE_API_KEYenvironment variable. You can get one here by creating your own Engine service. - Install the dependencies:
npm i - Start the server:
npm start. Your server will be running on port 3000. Your GraphQL server is available atlocalhost:3000/graphqland your GraphQL Playground is available atlocalhost:3000/graphql.
Welcome to the client portion of the workshop! We will be building a React app that pulls a list of movies, filters them by type, and allows you to favorite them after you've been logged in. The app is backed by Create React App and Apollo Client.
index.js: Where we set up Apollo Clientcomponents/: All of the React components that you will connect to Apollodata.js: Seed data powering the components before we switch to GraphQLApp.js: The top-level App component. You won't need to modify this file.index.css: Some random CSS. You won't need to modify this file.
- Click the button above to navigate to the CodeSandbox. Fork it to your account by clicking Fork in the top menu.
- That's it! CodeSandbox features HMR, a console, and a test runner. It's pretty awesome. 😍
00-start: Your starting point01-apollo-client: Setting up Apollo Boost and React Apollo02-queries: Writing Query components and pagination03-adv-queries: Writing Query components with fragments and fetchPolicy04-login: Writing Mutation components for login & authentication05-local-state: Local state management with Apollo Client06-final: Writing Mutation components that update the cache & use optimistic UI
- I didn't complete the last exercise and want to catch up: No worries! Each branch is its own CodeSandbox so everyone can go at their own pace. To check out the completed solution for your exercise, just click the CodeSandbox links above.
- Clone the repo:
git clone https://github.com/apollographql/fullstack-workshop-client - Install the dependencies:
npm i - Start the server:
npm start