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

Now, let’s practice our newly acquired skills and integrate the React frontend with two more GraphQL queries.

In the first part of this exercise, we’ll implement a new component that displays products from a particular category. In the second part, we’ll implement fetching a list of categories to initialize and create a new product form.


# Exercise source code

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

```bash
git checkout frontend-queries-exercise
```

# Starting the project

Before we start, here’s a brief reminder of how to start all the components for the application. We need to start three different processes: the database, the GraphQL server, and the React development server.  


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


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


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

We also have the option to replace data in the 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
```

Next, we start the client.

```bash
cd client
npm start
```

After all these steps, we can go to [localhost:4000](http://localhost:4000/) to use the application.

> **Note:** The localhost only works when we run the project on our local machines. We use the Educative URL for this purpose.

When we’ve made changes to the frontend, we just need to reload the webpage to apply our changes.

# Displaying a list of products in a category 

Let’s implement a new component that displays a list of products in a particular category.

First, we need to implement the new query. To get a list of products in a category, we use the `productByCategory` query we implemented before. This query accepts a category’s slug as a single parameter and returns all products from a single category.

We need to define this query in the `components/queries.js` and then use the fragment and query variables we defined in the previous lesson.

```js
// components/queries.js

// TODO: Add a query using the "productsByCategory" query
```

Here’s one way to do this:

Practice implementing and using queries with Apollo Client in a React application.


Exercise: GraphQL Queries

Getting Started with GraphQL

GraphQL Backend

Developing Frontend Application

Protecting GraphQL API

Advanced GraphQL

Appendix

Exercise: GraphQL Queries

Exercise source code

Starting the project