Gain insights into building full stack apps with GraphQL. Learn back-end setup, front-end integration with React, Apollo Client, and advanced GraphQL features, including caching and testing.

gld.tar.gz

CreatingBackendProject

ImplementingFirstResolver

NestedResolver

QueriesParameters

ExerciseAddCategories 

SettingUpTheDBlayer

ReturningDataFromDB

ExerciseReadUserDataFromDB 

ImplementingMutation

ErrorHandling

UI Setup

Pre-UI Setup

Client Queries

ImplementingDataLoaderWithAppllo

ExerciseImplementingDataLoader

Client Queries Exercise

Client Queries Server

Client Queries Server GraphQl

Client Queries-copy

UI-testing

Client Queries  Basam

CreatingBackendProjectInitialVersion

Pagination With GraphQL

Client Queries-React-Auth

ImplementingMutation-copy

ExerciseAddCategories -copy

GraphQL is a rapidly growing data query and manipulation language for web APIs. A strong grasp of GraphQL is essential for any software engineer who is developing applications on the modern web.

This course is a comprehensive introduction to building full-stack web applications using GraphQL. You’ll start by implementing a back end and exploring GraphQL’s unique approach to API implementation. After setting up your database, you’ll build a front-end application using React. The application will pass GraphQL queries using an Apollo client to pull information from the back end. You’ll wrap up with an exploration of more advanced GraphQL features, including DataLoader, Apollo client caching, and testing GraphQL applications.

By the end of this course, you’ll be ready to build full stack web applications using GraphQL, React, and Apollo.

Building Full Stack Applications with GraphQL

# Organizing the server

To make our project more organized, we’ll split our code into the following files:

* `resolvers.js`: A file fort our resolvers.

* `schema.graphql`: The GraphQL schema for our project.

* `schema.js`: A file that contains code to read the GraphQL schema.

* `nodemon.json`: The configuration for the `nodemon` tool. 


This is how the files are structured on the disk:



├── nodemon.json
├── package-lock.json
├── package.json
└── src
    ├── index.js
    ├── resolvers.js
    ├── schema.graphql
    └── schema.js

First, we need to move our schema to a separate file. For now, it contains a single `appName` query.

const { readFileSync } = require('fs')

function readSchema() {
  return readFileSync('src/schema.graphql').toString('utf-8')
}

The `readFileSync` reads and returns the content of a file. The `Sync` part of the function’s name means that the operation doesn’t return a `Promise`. Instead, it blocks the program’s execution until a file is read. We also need to convert the function’s return value to a UTF-8 string, using the `toString` function.

```js
module.exports = {
  readSchema
}
```

This is syntax sugar for the following code:

```js
module.export = {
  readSchema: readSchema
}
```

Now that we have our function in a separate file, we need to import a function to read our GraphQL schema in the `index.js`, call the function, and pass the results to the ApolloServer constructor.

Learn how to better organize our server project, which will help us easily navigate the project.


Organizing the Backend Project

Learn how to better organize our server project, which will help us easily navigate the project.

Getting Started with GraphQL

GraphQL Backend

Developing Frontend Application

Protecting GraphQL API

Advanced GraphQL

Appendix

Organizing the Backend Project

Organizing the server