Home

Table of Contents

• Introduction
• GraphQL
• AWS CodeBuild
• Backend APIs
• Authentication

Introduction

The dmsp_frontend_app is a web application built using NextJS React framework and TypeScript. The app serves up all the pages for the DMP Tool, and uses Apollo GraphQL Client to make requests to the backend server.

This app was bootstrapped with create-next-app.

The app is a hybrid framework using both frontend and backend logic. The app includes some API endpoints for dealing with authentication - namely for creating an http-only auth cookie, and for checking auth state, and deleting the auth cookie. It also uses middleware to control access to pages based on authentication and roles.

Graphql

The app uses Apollo Client to make requests to the backend Apollo Server. The app uses a shared instance of Apollo Client, located at lib/graphql/client/apollo-client.js for client components:

import { ApolloClient, InMemoryCache } from "@apollo/client";

const createApolloClient = () => {
    return new ApolloClient({
        `uri: process.env.NEXT_PUBLIC_GRAPHQL_SERVER_ENDPOINT,
        `cache: new InMemoryCache(),
    });
};

export default createApolloClient;

An example of it's usage is:

  const client = createApolloClient();

  const { data } = await client.query({
    query: graphqlQuery,
    variables: { name: searchTerm },
    context: { fetchOptions: { signal } }
  });

The app is using graphql-codegen to generate types from graphql queries and mutations. Please place your queries in the graphql directory and name the file like graphql/<name>.<query|mutation>.graphql per the codegen.ts config file. This will generate the generated/graphql.tsx file, and you can use the generated functions or documents to make the graphql requests.

Once the schema has been added, you will need to run npm run generate this kicks off a script that builds out Typescript Types for the new schema and queries. The schema is dependent on the graphql server running at dmsp_backend_prototype in order to successfully generate.

Some issues with NextJS and Apollo Client

There are some issues using Apollo Client in NextJS App Router/React Server Component(RSC). Specifically when using Apollo Client in SSR. If you want to fetch data server-side and hydrate on the client, then you need to use an experimental support package called “@apollo/experimental-nextjs-app-support”. These problems don’t exist if we limit our GraphQL to client components. For now, I’d like to propose that we limit our GraphQL requests to client components for now.

Having said that, I did put in some code to try and work with Server Side requests at lib/graphql/apollo-wrapper.tsx and lib/graphql/client.ts. This "experimental" code was obtained from the following resources, but I have not fully tested it yet. https://www.apollographql.com/blog/how-to-use-apollo-client-with-next-js-13 https://www.apollographql.com/blog/using-apollo-client-with-next-js-13-releasing-an-official-library-to-support-the-app-router https://github.com/apollographql/apollo-client-nextjs

AWS CodeBuild

We use AWS CodeBuild to build our app in the pipeline. It uses a set of build commands in the file buildspec.yaml located at the root of the app.

Backend APIs

Outside of GraphQL requests, the app uses two API endpoints to sign up and log in users.

• process.env.NEXT_PUBLIC_SERVER_ENDPOINT}/signin
• process.env.NEXT_PUBLIC_SERVER_ENDPOINT}/signup

Authentication

For simple log ins, the backend will return a Jason Web Token when a user logs in. The frontend app takes that token and stores it in an http only cookie. The app will verify the token before allowing access to certain protected pages.

For all requests, the auth token needs to be passed in the Header to the backend for added security.