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

In this exercise, we’ll implement a DataLoader to load objects from the `users` collection. Similar to how we did it in the previous lesson, we’ll have to add a new function to create a new DataLoader. Then, we’ll have to update our resolvers to use the new DataLoader instead of querying a database directly.

## Exercise source code

To get the source code for this exercise, run the following command in the project’s repository:

```bash
git checkout data-loader-exercise
```



import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

## How to start a project

Before we start writing code, here’s a quick reminder on how to run the project. In this lesson, we’ll only need to run the server and the database. We won’t use web frontend in this exercise.

First, we need to start a container with a MongoDB database.

```bash
cd server
npm run db:up
```

Alternatively, we can replace data in our database with the seed data using the `db:seed` command.

```bash
cd server
npm run db:seed
```

Once the database is running, we can start the server using the following command:

```bash
cd server
npm start
```


## Adding a new DataLoader 

The first thing that we need to do is to implement a new loader for users. To do this, head to the `server/src/dataloaders.js` file and try to implement the new `usersLoader`, which allows a batch of users to be loaded. The implementation should look similar to how we’ve implemented `categoriesLoader` previously.


In this exercise, we’ll implement a DataLoader to load objects from the `users` collection. Similar to how we did it in the previous lesson, we’ll have to add a new function to create a new DataLoader. Then, we’ll have to update our resolvers to use the new DataLoader instead of querying a database directly.

# Exercise source code

To get the source code for this exercise, run the following command in the project’s repository:

```bash
git checkout data-loader-exercise
```



Practice implementing the DataLoader library with Apollo Server.

Exercise: Implementing DataLoader

Getting Started with GraphQL

GraphQL Backend

Developing Frontend Application

Protecting GraphQL API

Advanced GraphQL

Appendix

Exercise: Implementing DataLoader

Exercise source code

Practice demo

How to start a project