Part 2 — Building a full-stack web app with PostGraphile and React: client-side steps

In Part 1 — Building Full-stack web app with PostGraphile and React (Server-side), we covered the server-side steps to build our full-stack web app. In this article, we will be covering the client-side steps.

A quick recap of Part 1: We created a new database ‘postgres-graphql’ under postgres . We also created node-express server which will connect to our database. Next, we added knex-migrate to maintain schema and to insert dummy/static data into our database. And finally, we added postgraphile to generate graphiql for our client for CRUD operations.

For the client-side steps, we’ll be using the following technologies:
React+TypeScript
GraphQL
Apollo

Let’s get started!

Step 5: Create React-TypeScript client

React is a JavaScript library for building user interfaces, and TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. By using them together, we will essentially build our user interfaces (UIs) using a typed version of JavaScript.

To start, we’ll go to our root folder and run the following command to create react app with typescript.

npm create react-app client --template typescript

Tip: Here, I have kept the app name client . If you wish to change it, you can go to client->package.json and change the name from ‘client’ to ‘GraphQL Cli’.

As we are using GraphQL, Apollo Client will be an ideal library. Apollo Client is a complete state management library for JavaScript apps. If we write a GraphQL query, Apollo Client will take care of requesting and caching our data, as well as updating our UI.

We will require some packages to build our client architecture. Here’s the command that will install all the required packages for us:

yarn add apollo-client apollo-cache-inmemory apollo-link-http @apollo/react-components @apollo/react-hoc @apollo/react-hooks graphql graphql-tag

We will be using apollo-hooks to use GraphQL query and mutations. Before that step, let’s structure our folders as follows:

/src
    - Components
    - graphql
        - query
        - mutations

The components folder will contain all our react components. Under graphql , Query folder will contain all GraphQl queries, and mutations will go in the mutations folder.

Step 6: Integrate graphql-codegen CLI

In order to use GraphQl queries and mutations as a hook, we need to implement ‘graphql-code-generator.’

To install the required package and enable the package to use, we’ll run the following command:

yarn add -D @graphql-codegen/cli

Then we’ll set up the codegen configuration by executing the following command:

yarn graphql-codegen init

This will launch a CLI wizard. Next, we’ll follow the steps in this list:

1. The application is built with React.
2. The schema is located at http://localhost:8080/graphql
3. Set our operations and fragments location to ./src/components/**/*.ts so that it will search all our TypeScript files for query declarations.
4. Use the default plugins “TypeScript”, “TypeScript Operations”, “TypeScript React Apollo.”
5. Update the generated destination to src/generated/graphql.tsx (.tsx is required by the react-apollo plugin).
6. Do not generate an introspection file.
7. Use the default codegen.yml file.
8. Make our run script codegen.

This will create a codegen.yml file in the root.

We will add one more directory in our codegen.yml as we will be saving our queries and mutations separately. We’ll also add one more configuration option withHooks: true , so it will also generate typed React Hook queries and mutations. Our configuration file will look as follows:

client/codegen.yml

To have hook based queries and mutations, we have added them to their respective folders and run the codegen command.

Let’s also create one simple query to fetch user details. We do this by creating a new file getUsers.query.ts under src/graphql/query . (You can use the help from http://localhost:8080/graphiql to get query syntax.) Here’s the query to fetch user details:

client/src/graphql/query/getUsers.query.ts

You can use other methods, but as we are using apollo-hooks , this is required for codegen. Now, let’s run the following command in the terminal under client folder:

yarn codegen

This will generate a file under src/generated/graphql.tsx based on configuration we have saved under codegen.yml . When we open the file, we’ll find that it has generated type and react hooks queries based on schema and query file.

Note: We need to run the yarn codegen command every time we add a new query and mutation under graphql folder.

Step 7: Use generated Queries and Mutation in Client

We have hook-based queries and mutations available now, so we can use them to display data. Here’s the sample file where we will display users, using generated hooked query:

client/src/Components/Users.tsx

Next, we can import the Users component into our App.tsx , and run the project using the following command:

yarn start

Similarly, we have to use mutations. Let’s create one mutation to update the user name.

First, check the syntax on http://localhost:8080/graphiql. From our graphiql we will get the mutation we need. Here’s an image for reference:

Mutations under graphiql.

Let’s create one more file under src/graphql/mutations/updateUserById.mutation.ts . Here’s the mutation to update user details by id:

client/src/graphql/query/updateUserById.mutation.ts

To have this mutation available in hooks, we’ll need to run the following command:

yarn codegen

Before we create a component to update the user, I prefer to have a separate file with the queries and mutations we will use. This is optional, but the reason I like it is that it allows us to get rid of the query and mutation extensions. Also, we can add some custom services in this file and use it from there. This will create one disciplined folder and code structure.

To do so, let create one file under src/utils/services.ts . Now we will import all queries and mutations we will be using in the project. Here’s the code:

client/src/utils/services.ts

Let’s create a new component to update user details under src/Components/UpdateUser.tsx :

client/src/Components/UpdateUser.tsx

Now we have updated the Users component to pass details to our newUpdateUser component, and updated the query fetch source to services. For reference:

client/src/Components/Users.tsx

And now we have completed the architecture! Now we can update our client, server and database.

Good luck! Cheers!

P.S : We’re hiring at Heady! 👋 If you would like to come work with us on some really cool apps please check out our careers page.