Preparing our GraphQL Layer

Before we start creating components and styling them, we need to create a good communication layer between our backend and frontend. We will write selectors and prepare the client to communicate with the backend in two states – authorized and not authorized.

Writing selectors

We will begin by creating a graphql folder inside our project’s /src folder and adding a selectors.ts file. Inside this file, we will write selectors for our GraphQL queries, and the types that will be used to type the application state.

First, what is a selector? A selector is Zeus’ version of a GraphQL fragment. We discussed fragments in Chapter 1, so go back for a recap.

Second, why do we need selectors? They can be used to create TypeScript types needed by React state and help persist type-safe data there.

The primary selector utilized for the queries on our system’s Home page is based on the QuestionsResponse type derived from the GraphQL...