DEV Community: Rida F Najid

Easy GraphQL Server in Node.js

Rida F Najid — Tue, 28 Feb 2023 07:05:39 +0000

In this article, we will create a simple CRUD (Create, Read, Update, Delete) using GraphQL in Node.js

I'll be using the following tools :

Express
Typescript
Apollo Server for the GraphQL engine
Sequelize

Javascript environment is very opinionated you can use other tools to achieve the same goal. But the idea is similiar.

I assume that you're already familiar in Node.js development. So, I won't explain further on the project setup. I want to focus on GraphQL explanation. If you want to see my setup you can check it out on my Github repo below.

I have this model

export interface MovieModel extends Model {
    id: number;
    title: string;
    description: string;
    posterUrl: string;
}

We will create GraphQL based on the MovieModel.

Schema

In GraphQL, you need to define a schema. The schema is like a blueprint of how GraphQL API can be accessed. You can learn more about GraphQL schema here.

There are two main operations in GraphQL: Query and Mutation. Query is read-only operation. It does not modify any data. Mutation is request for modifying data. It's used to create, update or delete data on the server. You need to define your operations in schema.

There are other operation types too such as Subscription. But, in this article I won't dive further other operations.

Okay, we need to create root schema first, it looks like this.

export const rootSchema = `#graphql

 type Query {
     root: String
 }
 type Mutation {
     root: String
 }
`;

And then we create Movie schema.

export const movieSchema = `#graphql

 type Movie {
   id: Int!
   title: String!
   description: String
   posterUrl: String
 }

 extend type Query {
    getAllMovies: [Movie]
    getOneMovie(id: Int!): Movie
 }

 extend type Mutation {
    createMovie(title: String!, description: String, posterUrl: String): Movie

    updateMovie(id: Int, title: String, description: String, posterUrl: String): Movie

    deleteMovie(id: Int!): String
 }
 `

As you can see, we can define custom data type on GraphQL schema. In this case, I created Movie type that has same attributes as the MovieModel.

After that we need to define our operations.

I created two Query operations. getAllMovies and getOneMovie.

getAllMovies doesn't have any input, but it will return an array of Movie.

getOneMovie have one input, id with an integer type. The exclamation mark (!) indicates that the input is required.

getOneMovie will only return one Movie data. That's why it doesn't have square brackets.

And then I created three mutations. Basically it's for create, update and delete.

There's no different in syntax between Query and Mutation.

Resolver

A resolver is the logical function when a GraphQL API is called. The resolver function must has same name as defined in the schema.

Here's example of Movie Resolver

const MovieResolver = {
    Query: {
        async getAllMovies(root, input, context) {
            return Movie.findAll();
        },
        async getOneMovie(root, input, context){
           return Movie.findByPk(input.id);
        }
    },
    Mutation : {
        async createMovie(root, input, context) {
            const { title, description, posterUrl } = input;
            return Movie.create({ title, description, posterUrl });
        },
        async updateMovie(root, input, context) {
            const id = input.id;
            const movie = input;
            await Movie.update(movie, { 
                where: { id: id }
            });

            return {id: id, ...movie};

        },
        async deleteMovie(root, {id}, context){
            const deleteRes = await Movie.destroy({
                where: {id: id}
            });

            if(deleteRes){
                return `Movie id:${id} has been deleted`;
            }else{
                return `Can't delete Movie id:${id}`;
            }
        },
    }
}

export default MovieResolver;

To put it simply, Resolver is like Controller in MVC design pattern.

Initializing Apollo Server

The final touch is to initialize Apollo Server in main.ts


async function startServer(){
    const app = express();

    const schema = makeExecutableSchema({
        resolvers: [MovieResolver],
        typeDefs: [rootSchema, movieSchema],
    });

    const apolloServer = new ApolloServer({
        schema: schema,
        introspection: true,
    });

    await apolloServer.start();

    app.use(
        cors(),
        bodyParser.json(),
        expressMiddleware(apolloServer)
    )

    app.listen(PORT, () => {
        console.log(`Server is running on port ${PORT}....`);
    });
}

startServer();

makeExecutableSchema is a function to register our resolvers and schema.

introspection is feature in Apollo to enable GraphQL Server to get the specification details of schema. It's useful in development stage. But, it should be disabled in production for security purpose.

Apollo has built in GUI GraphQL Client. You can access it in /graphql

Here's an example of query and mutation request on Apollo GraphQL Client

That's it for now!

You can access my code here

https://github.com/rfnajid/apollo-graphql-example

Optimistic Locking on Spring Boot

Rida F Najid — Mon, 09 Jan 2023 13:13:21 +0000

If your application has massive traffic. Sometimes there will be conflicting updates between data.

For example, User A and User B accidentally trying to update same data on same time. Both of their updates will be saved and both users will receive a successful response. Both of them will assume their data correctly saved. But, that's not the case - the first saved data will replaced by the last one. We don't know which user saved it first.

In order to prevent this, we can use Optimistic Locking. In Optimistic Locking we need to save record version in database.

If there's modification on a record, we need to check its version first. If the new data version is lower than the version in the database, it will be rejected. If it has the correct version, the new data will be saved and the version will be incremented.

It has quite a lot logic right? But, don't worry all of that process will be taken care by JPA.

We need to add the @version annotation to the entity.

@Entity
public class Student {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    Long id;

    String name;

    @Version
    Long version;
}

All done!

Here's a test script to check if Optimistic Locking is working correctly.

@DataJpaTest
public class RepoTest {

    @Autowired
    StudentRepository repo;

    @Test
    void testOptimisticLock(){
        Student initStudent = new Student(1L, "Andy", 0L);
        Student insertedStudent = repo.saveAndFlush(initStudent);

        assertEquals(0, insertedStudent.getVersion());

        insertedStudent.setName("Jack");
        Student updatedStudent = repo.saveAndFlush(insertedStudent);

        assertEquals(1, updatedStudent.getVersion());

        assertThrows(OptimisticLockingFailureException.class, () ->
            repo.saveAndFlush(initStudent)
        );
    }
}

You can check the full code here

*Note *

If you don't want to add dedicated version field to your existing table, you can use the update date as the version instead.

Why react is so hard

Rida F Najid — Thu, 03 Nov 2022 13:12:49 +0000

Here's my POV why react is so hard. Especially for OOP-minded and beginner.

useEffect doesn't make any sense

Since React 16.8, They introduced more simple way to write React in alternative to class based component. They call it React Hooks. To be honest, It really makes write React app more simple.

But, it has a downside for an OOP-minded programmer like me. In React Hooks, we use state to declare variables, by calling useState function.

And... there's a function called useEffect. At first, it doesn't make sense. I don't need fancy effects to build simple ToDo App. It turns out, it called useEffect not because of it will use animation effect. But, every DOM changing or data fetching are called "side-effect". That's why they named it useEffect. It doesn't make any sense for me. It should be called update, onRefresh or something like that.

According to documentation useEffect is Hook version of componentDidMount, componentDidUpdate, and componentWillUnmount combined. Every mount, update and unmount will call useEffect. It doesn't make any sense right??

In contrary from most developers, I will recommend you to keep using React class based component, if you have strong OOP philosophy. It more easy to understand although it will require more codes.

Comparison React hooks vs React class based component

Logic and View mixed together

As an OOP-minded developer, most of us like to separate codes between logics and views. Logic is for data manipulation, data fetching, etc. and view is for showing end result to user. Usually, we use html or templating engine to make it more cleaner.

But, in React you cannot separate "html" from JS. That's why its called JSX. If you're not accustomed by this, you'll constantly lost in your own codes. In order to avoid this, you need to splice component into smaller components.

CSS-in-JS

React can generate CSS by using JS. Biggest difference between classic CSS and CSS-in-JS is syntax formatting. CSS-in-JS use camel case.

This is optional feature, we can still import classic CSS module.

State Management

Communication between components need a global state. A lot of ways to manage state in React. The official way is using React Context. You don't need any dependencies to use React Context. But, it has limitation. It's not recommend if your app is growing bigger and bigger.

The alternative is using Redux. Most people are using Redux. In real life, Redux is the standard React State Management. A lot of React job opportunities include Redux as Technical Requirement.

In my honest opinion, learning curve of React Context and Redux is too steep. Both of them are too complex.

Credits :