GraphQL by Example

Build an end-to-end GraphQL example by creating a server with a schema using Schema Definition Language, implementing resolvers for a greeting field, and a client page to query the API.

Expose a GraphQL API over http by setting up Apollo server, installing @apollo/server and graphql, configuring typeDefs and resolvers, and starting the server on port 9000 with a logged url.

Set up Apollo Server to run a GraphQL API and use the Sandbox to write and run queries against the schema, with data and errors in responses.

Explore GraphQL over HTTP by inspecting a GraphQL request in the browser, using DevTools to view a JSON POST with query and variables, and interpreting the 200 OK response.

Build a simple GraphQL client in vanilla JavaScript by creating a client project, sending a post request with a JSON query, and displaying the server greeting.

Explore the GitHub repository for GraphQL by Example to view per-lecture commits, diffs, and code changes, and learn how to run and compare your code with the course materials.

Compare code-first and schema-first GraphQL approaches, show how to implement with Nexus and SDL, and discuss benefits, trade-offs, and when to choose each in the course.

Explore a realistic GraphQL job board architecture by building a client–server app with a GraphQL API, a data access layer, authentication, and a web client using React and SQLite.

Learn to implement a GraphQL API for a job board by connecting a React frontend with an Express and SQLite backend, using a ready-made project and Apollo Server.

Install and configure Apollo Server with Express, wire the /graphql middleware, load typeDefs from schema.graphql and resolvers, start the server, and expose a working GraphQL endpoint.

Define a custom GraphQL object type Job with fields title, description, and id of type ID, and implement resolvers returning a Job object.

Learn how GraphQL handles nullability with the Job type, mark fields as non-nullable using an exclamation mark, and return arrays of jobs while handling errors and empty results.

Learn how to load jobs from an SQLite database using Knex in a GraphQL resolver, returning database data as the jobs array.

Learn how to extend a GraphQL schema with a date field for jobs and implement field resolvers to map createdAt to a formatted ISO date for the UI.

Learn how resolver functions drive GraphQL requests: fetch jobs with id and date, compute and format date from another property, and rely on context, default behaviour, and error handling.

Add a documentation comment to the Job.date field in a GraphQL schema, describing the ISO 8601 date and using markdown for clarity in Apollo Sandbox.

Learn to model an object association in GraphQL by adding a Company type and a Job.company resolver that fetches the related company via companyId, returning id, name, and description.

Learn to fetch real job data with graphql-request by setting up a GraphQLClient, writing a getJobs query, and replacing fake data with server-driven results for the home page.

Use useState and useEffect in the home page to fetch jobs from a GraphQL server, update the jobs state, and render them via JobList and JobItem.

Fetch a single job by id with GraphQL query arguments, implement a job resolver, and load the correct job from the database for the frontend.

Learn how to fetch a job by id with a GraphQL query using variables in the frontend, including date and company details, on the JobPage.

Extend the GraphQL server with a company query by id, implement a resolver using getCompany, and fetch the data in the CompanyPage with a client-side getCompany call and loading state.

Extend the GraphQL company type with a non-nullable jobs field, implement getJobsByCompany to fetch jobs by companyId from the database, and display them with the shared JobList.

Learn how GraphQL enables recursive queries that navigate from a company to its jobs and back, then deepen to nested relationships via resolvers like users and their friends.

Explore how GraphQL handles errors, including validation and bad input codes, impact of nullable versus non-nullable fields, fault-tolerant responses with custom not-found errors, and multi-field queries using the CompanyById example.

Define and throw custom GraphQL errors with GraphQLError and a not found code when a company or job is missing, using a notFoundError helper.

Handle request states in a React app by implementing a state object with loading, data, and error, using try/catch to manage GraphQL responses and display 'data unavailable' on errors.

Introduce GraphQL mutations to modify data with a createJob mutation that accepts title and description, implementing a resolver to insert a new job for a hard-coded company.

Learn to simplify GraphQL mutations by using a single input object, CreateJobInput, to pass title and description. Destructure input in the resolver and adopt this best practice for mutations.

Reset the database to its initial state by running the create-db.js script. Stop the server, run node scripts/create-db.js, and restart with npm start to see only the initial three jobs.

Update the frontend to create a new job by sending a GraphQL mutation from the CreateJobPage, alias the response as job, and navigate to the new job page by id.

Define a deleteJob mutation in the schema, implement a resolver that calls the database delete function with the job id, and test in Sandbox to confirm the job is removed.

GraphQL by example shows implementing an updateJob mutation using an UpdateJobInput with id, title, and description, calling updateJob to update only title and description while keeping companyId and createdAt unchanged.

Learn how authentication secures a GraphQL app: login yields a token, stored in local storage, and sent via authorization header to authorize actions like posting jobs.

Learn how to access the Express request in GraphQL resolvers via a context function, validate authentication with req.auth from express-jwt, and throw an unauthorized error to prevent unauthorized job creation.

Load the authenticated user into the context and replace the hard-coded companyId with user.companyId when creating a job, so each job associates with the user's company.

Configure the GraphQL client to automatically attach a bearer token in the Authorization header for all requests, ensuring authenticated job creation.

Secure deleteJob by enforcing authentication and companyId checks, apply updateJob similarly, and return notFoundError when a job doesn't belong to the user's company, preventing cross-company deletions.

Validate authentication and scope the update using user.companyId; throw notFoundError if no match. Mirroring the deleteJob approach, it ensures all mutations are restricted to authorized users.

Explore why authentication belongs to the underlying protocol rather than the GraphQL API, using HTTP headers, tokens, cookies, and WebSockets to secure access.

Compare GraphQL-Request with Apollo Client's caching and declarative data fetching, and use useQuery to manage loading and error states.

Install and configure Apollo Client in your web app, set the uri and an InMemoryCache, create an apolloClient, and use gql to produce a DocumentNode.

Migrate your queries to ApolloClient by using the query method to fetch jobs, a single job, and a company, returning data from the query results.

Learn to perform a createJob mutation with Apollo Client using mutate, pass input with title and description, and authenticate requests by configuring an authLink that injects the authorization header.

Learn how Apollo Client caches GraphQL data, how it normalizes data into Job and Company objects, merges new fields, and builds cache keys using __typename and id.

Explore how Apollo Client caches queries by default and how to control data freshness with fetchPolicy and defaultOptions, including cache-first vs network-only for queries and watchQuery behavior.

Master Apollo Client cache for create operations by updating the cache with the CreateJob mutation data via writeQuery, so JobById pages render from cache with a single request.

Learn how to define and reuse a GraphQL fragment to share common fields between the JobById query and CreateJob mutation, avoiding duplication.

Learn how to use the useQuery hook with Apollo Client in React to fetch data, manage loading and error states, and simplify GraphQL requests.

Refactor a React component to use a custom hook useCompany for fetching company data with useQuery. Encapsulate GraphQL logic and return company, loading, and error flags.

Create custom hooks useJob and useJobs to replace getJob and getJobs, using useQuery with jobByIdQuery and jobsQuery, and handle loading, error, and data unavailable states in JobPage and HomePage.

Demonstrates implementing a createJob mutation with the useMutation hook, converting the mutation to createJobMutation, and invoking mutate on form submission to update the cache and navigate to the new job.

Explore how useMutation returns a result with a loading state to disable the submit button and prevent duplicate submissions, and consider handling the error state with user feedback.

Extract the useMutation logic into a new custom hook called useCreateJob, returning createJob and loading to handle form submission and navigate using the returned job object.

Demonstrate the N+1 query problem by showing how loading jobs and their company data triggers 1 + N database queries, highlighting the need for joins or optimization.

Using DataLoader to batch database access, this lecture shows installing the dataloader package, creating a loader to batch load by ids, preserving order, and reducing queries in a GraphQL server.

Learn how per-request caching with a fresh DataLoader per GraphQL request eliminates global caching, using a createCompanyLoader function and context to pass loaders to resolvers.