NodeJs

Building a Full-Stack Application with Node.js, React, and GraphQL

Posted on by thuan

In recent years, the combination of Node.js, React, and GraphQL has become increasingly popular for building full-stack web applications. Node.js provides a powerful server-side environment, React allows for dynamic client-side user interfaces, and GraphQL provides a flexible and efficient data querying and manipulation tool. In this article, we will explore how to build a full-stack application with these technologies.

Setting up the Development Environment

Before we start building our application, we need to set up our development environment. We will use Node.js to manage dependencies and run our application, React to build the client-side code, and GraphQL to handle the data layer.

To get started, create a new directory for your project and run the following command in your terminal:

csharp
npm init

This will initialize a new Node.js project and create a package.json file in your project directory.

Next, install the necessary dependencies by running the following commands:

lua
npm install --save express graphql express-graphql cors mongoose
npm install --save-dev nodemon

The express package is a popular Node.js web framework that we will use to build our server, while graphql, express-graphql, and cors are packages that will help us set up a GraphQL server. We will also use mongoose to connect to a MongoDB database.

We also need to install React by running the following command:

lua
npx create-react-app client

This will create a new React application in a directory called client.

Creating the Server

Now that we have set up our development environment and installed the necessary dependencies, we can start building our server.

Create a new file called server.js in your project directory and add the following code:

javascript
const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const cors = require('cors');
const mongoose = require('mongoose');
const schema = require('./schema');

const app = express();
app.use(cors());

mongoose.connect('mongodb://localhost/myapp', { useNewUrlParser: true });
mongoose.connection.once('open', () => {
  console.log('Connected to database');
});

app.use(
  '/graphql',
  graphqlHTTP({
    schema,
    graphiql: true,
  })
);

const port = process.env.PORT || 4000;

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

This code creates an Express server that sets up a GraphQL endpoint at /graphql. The schema variable is a GraphQL schema that defines the available queries and mutations. We will create this schema in the next step.

The cors package is used to allow cross-origin requests, which is necessary for a client-side React application to communicate with the GraphQL server. Finally, we connect to a local MongoDB database using mongoose.

Creating the GraphQL Schema

With our server in place, we can now create the GraphQL schema. Create a new file called schema.js in your project directory and add the following code:

javascript
const { GraphQLSchema, GraphQLObjectType, GraphQLString } = require('graphql');

const RootQuery = new GraphQLObjectType({
  name: 'RootQueryType',
  fields: {
    hello: {
      type: GraphQLString,
      resolve() {
        return 'Hello World';
      },
    },
  },
});

module.exports = new GraphQLSchema({
  query: RootQuery,
});

This code creates a simple GraphQL schema with a single query that returns the string “Hello World”. We can test this query using the GraphiQL interface by visiting http://localhost:4000/graphql in our web browser.

Creating the React Application

Now that we have our server and GraphQL schema in place, we can create our client-side React application.

Open the client directory in your terminal and run the following command to start the development server:

sql
npm start

This will open a new browser window at http://localhost:3000 and display the default React application.

Next, we need to set up our application to communicate with the GraphQL server. In the src directory of the client directory, create a new file called index.js and add the following code:

javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from '@apollo/client';
import { ApolloClient, InMemoryCache } from '@apollo/client';
import App from './App';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

This code sets up an Apollo Client, which is a popular library for communicating with a GraphQL server from a React application. The uri property is set to the URL of our GraphQL server, and the InMemoryCache object is used to cache data from the server.

Now we can create our React components. In the src directory of the client directory, create a new file called App.js and add the following code:

javascript
import React from 'react';
import { useQuery, gql } from '@apollo/client';

const HELLO_QUERY = gql`
  {
    hello
  }
`;

function App() {
  const { loading, error, data } = useQuery(HELLO_QUERY);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return <h1>{data.hello}</h1>;
}

export default App;

This code defines a simple React component that queries the GraphQL server using the useQuery hook from Apollo Client. The HELLO_QUERY variable is a GraphQL query that requests the hello field from our GraphQL schema. The loading and error variables are used to display a loading message or an error message if something goes wrong with the query. Finally, the data variable is used to display the result of the query in an h1 element.

Putting it All Together

With our server, GraphQL schema, and React application in place, we can now test our full-stack application.

Make sure the development server for the React application is still running in the client directory by running npm start if necessary. Then, in the root directory of your project, start the Node.js server by running the following command:

arduino
npm run dev

This will start the server using nodemon, which will automatically restart the server whenever changes are made to the code.

Now, if you visit http://localhost:3000 in your web browser, you should see the text “Hello World” displayed on the page.

Conclusion

In this article, we have explored how to build a full-stack web application using Node.js, React, and GraphQL. We set up a Node.js server, created a GraphQL schema, and built a React application that communicates with the GraphQL server using Apollo Client. With these technologies, it is possible to build efficient and dynamic web applications that can handle complex data queries and manipulations.

0368826868