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

It’s time to finish our integration with MongoDB. To do so, we must add a Mongoose schema for the `users` collection and update the remaining resolvers.

As before, this exercise provides a starter code, a walkthrough of the changes we need to implement, and, in case we get stuck, a solution code.



# Exercise source code

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

```bash
git checkout db-resolver-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 run the application

Our application has become a bit more complex, and we need to go through more steps to start it. Because it now reads data from a database, we need to start a database server.

```bash
npm run db:up
```

If the database isn’t seeded, we need to do that first. We can do that with the following command:


```bash
npm run db:seed
```

We only need to seed a database once because the data is persistent across restarts. Once we have a running database with seeded data, we can finally start the GraphQL server with this command:


If the application has successfully connected to the database, we should see the output below in the logs.


```bash
npm start
```

You should see the following output in the logs if the application has successfully connected to the database:

```
[2021-08-29 14:55:11.318 +0100] INFO: Listening on port 4000
[2021-08-29 14:55:11.377 +0100] INFO: Connected to a DB
```

To test our changes, we can send GraphQL queries using this URL: `http://localhost:4000/graphql`


We can also inspect data in the MongoDB database by using the web-based dashboard at this URL: `http://localhost:8081/`


## Define the Mongoose schema for the user type

Before implementing the remaining resolvers, we must finish a Mongoose model for the users collection. A `user` object should contain the `userName` and `fullName` fields, both of type `String`. All we need to do is to fill in the TODO section in the following file:



Practice implementing resolvers that read data from a MongoDB database.


Exercise: Read User Data from the Database

Practice implementing resolvers that read data from a MongoDB database.

Getting Started with GraphQL

GraphQL Backend

Developing Frontend Application

Protecting GraphQL API

Advanced GraphQL

Appendix

Exercise: Read User Data from the Database

Exercise source code

Practice demo

How to run the application