📈 Learn GraphQL, Apollo Server 2 and Black-box Testing
So what is GraphQL? Find out in this tutorial by learning GraphQL with Jest Snapshots. In this video, I will be showing you how to use Apollo Server 2 and GraphQL. You will gain an understanding of GraphQL by setting up your GraphQL schema that represents the structure of your data set, furthermore, we will do this by looking at TypeDefs (type definitions). Once we have created our schema the next step will be to let Apollo Server know how to interact with that schema, essentially how to execute queries. To do this we will use something called a resolver, a resolver essentially tells Apollo how to fetch data, moreover how to fetch data for a particular type. Once we have set up our resolvers we will look at data sources. Data sources are nothing more than a class that sets out our scaffolding for making requests to external APIs (in our case). Although we just touch the surface of what a data source can do by using RESTDataSource, they can do much more.
Towards the end of this video, we will be using Jest to test our data sources, and then we will be creating black-box tests (snapshots) to test our typedefs & resolvers – which will be hooked up to fixture files (mock data). For a quick TLDR of what we have done, skip to 2:58:49 - I essentially went with the format of ‘schema (typedefs) – resolvers – datasources’.
🎯 Github repo: https://github.com/karlhadwen/newsreader-graphql
–
⏳ Timeline
0:00:00 - Reviewing where we left off
0:03:19 - Quick look over the UI of the first tutorial
0:03:30 - Github repo of the first project
0:04:06 - Reviewing the read me
0:04:21 - Initial setup for our application
0:04:36 - Creating our package.json file
0:07:01 - Optional chaining import!
0:09:46 - Installing all our packages
0:10:26 - Creating our server.js file
0:11:11 - Setting up ApolloServer
0:12:41 - Setting up our typedefs
0:12:51 - Setting up our resolvers
0:13:30 - Quick talk about how GraphQL handles field requests
0:15:47 - Similarities between GQL & RPC
0:18:07 - Adding typedefs within (typedefs/index.js)
0:19:02 - Creating our Article object type
0:20:22 - Defining an instance of an executable query
0:21:32 - Adding more fields to our Article object type
0:26:25 - Creating our essential .babelrc file
0:26:55 - Starting our server!
0:27:25 - Exploring Graphiql on port 4000
0:33:55 - Executing a dummy query
0:36:10 - Hooking up our resolvers
0:37:49 - Exploring resolver arguments
0:39:54 - Logging our executable query arguments
0:40:19 - Exploring the context argument
0:44:09 - Creating our datasource files
0:49:01 - Implementing the hackernews.js datasource
0:52:30 - Explaining RESTDataSource
1:00:01 - Adding methods to our datasource
1:03:36 - Adding a transformer method
1:05:06 - Adding our datasource to our index.js
1:06:01 - Accessing our datasource via the context argument
1:07:21 - Adding all datasources to the context
1:09:51 - Our first successful query via Graphiql!
1:10:56 - Adding more resolvers
1:13:22 - Adding more executable queries into our typedefs
1:15:12 - Debugging syntax errors
1:18:08 - Succesful query responses
1:23:08 - Async resolver explained
1:27:23 - Testing our allArticles resolver
1:31:23 - Adding the New York Times datasource
1:40:03 - Adding the fixture files for testing
1:43:23 - Testing the HackerNews datasource
2:02:03 - Looking at the Apollo documentation for testing
2:06:13 - Testing the HackerNews queries
2:28:48 - Running our black-box tests
2:40:32 - The difference in mocking return objects/arrays
2:43:38 - Checking our coverage levels
2:45:05 - Testing the New York Times datasource
2:49:00 - Testing the New York Times queries
2:52:25 - Checking coverage, nearly at 100%
2:55:15 - 100% test coverage (unit & black-box tests)
2:55:50 - Quick look at aliases
2:58:49 - TLDR: overview of the project!
3:08:00 - Signing off!
#graphql #apollo #jest #databases
