Let's brainstorm the GraphQL fields we'll need to integrate Google OAuth into our app.

The first thing we'll do is clear out our schema from Part I of the course. We'll go to the type definitions file in our server project (src/graphql/typeDefs.ts) file and remove the definitions for the fields we had before.

import { gql } from "apollo-server-express";

export const typeDefs = gql`

  type Query {}

  type Mutation {}

`;

We can also delete the Listing folder from our src/graphql/resolvers/ folder since we'll no longer need the listingResolvers map we created in Part I. This will also require us to remove the import and use of the listingResolvers map in the src/graphql/resolvers/index.ts file.

import merge from "lodash.merge";

export const resolvers = merge();

In our GraphQL type definitions file, we'll create three new GraphQL fields to help with authenticating users with Google OAuth.

The first step in our OAuth flow requires us to redirect our user to Google so they can authorize our app and sign in. We'll need to generate the URL that will navigate the user to the Google consent form. We'll construct this URL in our server application and have our client app be able to retrieve this URL from the server through a query field. This query field will be the authUrl field.

Once Google Sign-In provides a value for the authorization code and redirects the user to the /login page of our app, we'll want to have our React app pass the code onto our Node server. Our Node server will then make a request to Google servers with the code to retrieve the access token of the signed-in user. The logIn mutation will be the mutation our React client application will fire while passing in the code to make the request to Google to retrieve the token for a user.

Finally, we'll have a logOut mutation to have the user be able to log-out from our app.

authUrl, logIn, and logOut are the three GraphQL root-level fields we'll need to handle Google OAuth. Let's prepare our GraphQL API type definitions and resolvers with these new fields.

authUrl#

In the src/graphql/typeDefs.ts file, we'll introduce an authUrl field in our root Query object. This field when resolved will return a string.

import { gql } from "apollo-server-express";

export const typeDefs = gql`

  type Query {

    authUrl: String!

  }

  type Mutation {}

`;

logIn#

Our logIn mutation will accept a code argument and when resolved will return an instance of the user (with which we're going to call the Viewer) that has been logged-in. We'll handle this in the next lesson and for now simply state that the logIn mutation when resolved will return a string.