Book Image

React 17 Design Patterns and Best Practices - Third Edition

By : Carlos Santana Roldán
2 (1)
Book Image

React 17 Design Patterns and Best Practices - Third Edition

2 (1)
By: Carlos Santana Roldán

Overview of this book

Filled with useful React patterns that you can use in your projects straight away, this book will help you save time and build better web applications with ease. React 17 Design Patterns and Best Practices is a hands-on guide for those who want to take their coding skills to a new level. You’ll spend most of your time working your way through the principles of writing maintainable and clean code, but you’ll also gain a deeper insight into the inner workings of React. As you progress through the chapters, you’ll learn how to build components that are reusable across the application, how to structure applications, and create forms that actually work. Then you’ll build on your knowledge by exploring how to style React components and optimize them to make applications faster and more responsive. Once you’ve mastered the rest, you’ll learn how to write tests effectively and how to contribute to React and its ecosystem. By the end of this book, you'll be able to avoid the process of trial and error and developmental headaches. Instead, you’ll be able to use your new skills to efficiently build and deploy real-world React web applications you can be proud of.
Table of Contents (21 chapters)
1
Hello React!
4
How React Works
10
Performance, Improvements, and Production!
19
About Packt

Defining our GraphQL types, queries, and mutations

Now that you've created your Apollo Server instance, you need to create your GraphQL types. In this case, we will create some types, queries, and mutations for users.

The first thing you need to do is define your scalar types at /backend/src/graphql/types/Scalar.graphql:

scalar UUID
scalar Datetime
scalar JSON

Now, let's create our User.graphql file with our initial User type:

type User {
id: UUID!
username: String!
password: String!
email: String!
privilege: String!
active: Boolean!
createdAt: Datetime!
updatedAt: Datetime!
}

As you can see, we are using some scalar types such as UUID and Datetime to define some fields in our User type. In this case, when you define a type in GraphQL, you need to do so with the type keyword, followed by the type's name capitalized. Then, you can define your fields inside the curly braces, {}.

There are some primitive data types in GraphQL such as String, Boolean, Float, and Int. You...