Using GraphQL Effectively with NextJS and NestJS

Introduction

GraphQL is a powerful query language for APIs which optimizes performance by allowing the client side to accurately define the required data structure, completely overcoming the over-fetching and under-fetching disadvantages of traditional REST APIs.

In this article we will set up the connection environment as follows: Client connects to NextJS server which acts as a middleware to forward the GraphQL payload to NestJS. You will see that most of the implementation on NestJS will be quite simple and most of the content is auto-generated code via prisma-nestjs-graphql. It is suitable for projects that have complex processing requirements concentrated on the frontend and applying GraphQL will bring high flexibility in querying data so that the team can focus on building features for the frontend effectively.

Prerequisites

Please take a look at this article where I have specific instructions on setting up GraphQL for NextJS, here on the FE side we will use @tanstack/react-query and graphql-request to query data so you may not need to install @apollo/client.

Detail

NestJS project

First, install the following packages:

yarn add graphql @nestjs/graphql @nestjs/apollo @apollo/server @as-integrations/express5
yarn add -D prisma-nestjs-graphql @prisma/generator-helper

These packages provide the core libraries of GraphQL, the module integrating Apollo Server into NestJS along with auto-generation tools to synchronize the database structure from Prisma into input types in the GraphQL system.

Create file prisma/schema.prisma:

datasource db {
  provider = "postgresql"
}

generator client {
  provider = "prisma-client-js"
}

generator nestgraphql {
  provider = "prisma-nestjs-graphql"
  output   = "../gen/graphql"
}

model Product {
  id        Int      @id @default(autoincrement())
  name      String
  price     Float
  createdAt DateTime @default(now())
}

This Prisma configuration block declares the PostgreSQL data source, creates a standard Prisma Client and uses the prisma-nestjs-graphql generator to automatically map the Product table structure into objects, filters and argument types completely compatible with NestJS GraphQL.

Update file package.json to add the following scripts:

{
  "scripts": {
    "prisma:migrate": "prisma migrate dev --name",
    "prisma:generate": "prisma generate"
  }
}

Please run the following command to create the migrate file and update the database:

yarn prisma:migrate

Then execute this command to generate the data types for GraphQL:

$ yarn prisma:generate
yarn run v1.22.22
$ prisma generate
Loaded Prisma config from prisma.config.ts.
Prisma schema loaded from prisma/schema.prisma.

✔ Generated Prisma Client (v7.8.0) to ./node_modules/@prisma/client in 51ms
✔ Generated Prisma NestJS/GraphQL to ./src/@generated in 71ms

Start by importing your Prisma Client (See: https://pris.ly/d/importing-client)

✨  Done in 1.23s.


You can check the results of the generated files as follows.


Create file src/resolver/product.resolver.ts:

import {Args, Mutation, Query, Resolver} from '@nestjs/graphql'
import {CreateOneProductArgs} from 'gen/graphql/product/create-one-product.args'
import {DeleteOneProductArgs} from 'gen/graphql/product/delete-one-product.args'
import {FindManyProductArgs} from 'gen/graphql/product/find-many-product.args'
import {Product} from 'gen/graphql/product/product.model'
import {UpdateOneProductArgs} from 'gen/graphql/product/update-one-product.args'
import {PrismaService} from 'src/service/prisma.service'

@Resolver(() => Product)
export class ProductResolver {
  constructor(private readonly prisma: PrismaService) {}

  @Query(() => [Product], {name: 'products'})
  getProducts(@Args() args: FindManyProductArgs) {
    return this.prisma.product.findMany(args)
  }

  @Mutation(() => Product, {name: 'createProduct'})
  createProduct(@Args() args: CreateOneProductArgs) {
    return this.prisma.product.create(args)
  }

  @Mutation(() => Product, {name: 'updateProduct'})
  updateProduct(@Args() args: UpdateOneProductArgs) {
    return this.prisma.product.update(args)
  }

  @Mutation(() => Product, {name: 'deleteProduct'})
  deleteProduct(@Args() args: DeleteOneProductArgs) {
    return this.prisma.product.delete(args)
  }
}

This class acts as a GraphQL Resolver responsible for handling CRUD business logic, using NestJS @Query and @Mutation decorators combined directly with data type definitions automatically generated from Prisma to manipulate the database via PrismaService.

Update file src/app.module.ts:

import {ApolloServerPluginLandingPageLocalDefault} from '@apollo/server/plugin/landingPage/default'
import {ApolloDriver, ApolloDriverConfig} from '@nestjs/apollo'
import {
  MiddlewareConsumer,
  Module,
  NestModule,
  RequestMethod,
} from '@nestjs/common'
import {ConfigModule} from '@nestjs/config'
import {GraphQLModule} from '@nestjs/graphql'
import {join} from 'path'
import {OriginAuthMiddleware} from './middleware/origin-auth.middleware'
import {ProductResolver} from './resolver/product.resolver'
import {EnvironmentService} from './service/environment.service'
import {PrismaService} from './service/prisma.service'

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true,
      envFilePath: '.env',
    }),
    GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: join(process.cwd(), 'gen/graphql/schema.gql'),
      sortSchema: true,
      playground: false,
      plugins: [
        ApolloServerPluginLandingPageLocalDefault({
          embed: true,
        }),
      ],
    }),
  ],
  providers: [
    EnvironmentService,
    PrismaService,
    ProductResolver,
  ],
})
export class AppModule {}

The configuration code for the main module (AppModule) of the NestJS application initialization GraphQLModule uses the Apollo driver, configures the automatic generation of the GraphQL schema file (schema.gql), sorts schema fields and integrates the local Apollo Sandbox interface replacing the old Playground to test the API visually.


After starting by default it will support the old Playground like this.


When switching to the newer Apollo Sandbox it will be like this.


Update file src/main.ts:

import {NestFactory} from '@nestjs/core'
import type {NestExpressApplication} from '@nestjs/platform-express'
import {AppModule} from 'src/app.module'

export async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule)
  const port = process.env.PORT ?? 4000
  await app.listen(port)
}
bootstrap()

NextJS project

Please install the following packages:

yarn add graphql-request

Add the following scripts to the package.json file:

{
  "scripts": {
    "graphql:gen": "graphql-codegen",
    "graphql:genw": "graphql-codegen --watch"
  }
}

Create file app/api/graphql/route.ts:

import {NextRequest, NextResponse} from 'next/server'

const host = process.env.SERVER_GRAPHQL_HOST || ''

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const res = await fetch(host, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(body),
    })
    const data = await res.json()
    return NextResponse.json(data)
  } catch (error: any) {
    return NextResponse.json(
      {errors: [{message: error.message}]},
      {status: 500}
    )
  }
}

This file defines a Route Handler in NextJS acting as an intermediary proxy connection, it receives GraphQL query payloads from the Client, forwards requests to the NestJS Backend Server via the internal network environment to secure the real endpoint and avoid CORS policy conflicts.

Create file app/feature/graphql/product.graphql.ts:

import {gql} from '@/gql'

export const GET_PRODUCTS = gql(`
  query GetProducts(
    $where: ProductWhereInput
    $orderBy: [ProductOrderByWithRelationInput!]
  ) {
    products(where: $where, orderBy: $orderBy) {
      id
      name
      price
      createdAt
    }
  }
`)

export const CREATE_PRODUCT = gql(`
  mutation CreateProduct($data: ProductCreateInput!) {
    createProduct(data: $data) {
      id
    }
  }
`)

export const UPDATE_PRODUCT = gql(`
  mutation UpdateProduct(
    $data: ProductUpdateInput!
    $where: ProductWhereUniqueInput!
  ) {
    updateProduct(data: $data, where: $where) {
      id
    }
  }
`)

export const DELETE_PRODUCT = gql(`
  mutation DeleteProduct($where: ProductWhereUniqueInput!) {
    deleteProduct(where: $where) {
      id
    }
  }
`)

The code defines the structure of specific Query and Mutation operations on the Client side by using the gql tag, these query strings help the GraphQL Code Generator system scan through and automatically map into strictly typed data types and API calling methods in TypeScript.

Then execute the command to generate types for GraphQL:

$ yarn graphql:gen
yarn run v1.22.22
$ graphql-codegen
✔ Parse Configuration
✔ Generate outputs
✨  Done in 1.02s.

Create file app/graphql/product.hook.ts:

import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
import {message} from 'antd'
import {request} from 'graphql-request'
import {useState} from 'react'
import {
  CREATE_PRODUCT,
  DELETE_PRODUCT,
  GET_PRODUCTS,
  UPDATE_PRODUCT,
} from './product.graphql'

const API_URL = process.env.NEXT_PUBLIC_GRAPHQL_HOST || ''

export interface ProductSortState {
  field: 'name' | 'price' | null
  order: 'asc' | 'desc' | null
}

export function useProductQueries() {
  const queryClient = useQueryClient()
  const [searchName, setSearchName] = useState('')
  const [sort, setSort] = useState<ProductSortState>({field: null, order: null})

  const orderBy =
    sort.field && sort.order ? [{[sort.field]: sort.order}] : undefined

  const {data, isLoading} = useQuery({
    queryKey: ['products', searchName, sort],
    queryFn: () =>
      request(API_URL, GET_PRODUCTS, {
        where: searchName ? {name: {contains: searchName}} : undefined,
        orderBy,
      }),
  })

  const createMutation = useMutation({
    mutationFn: (values: {name: string; price: number}) =>
      request(API_URL, CREATE_PRODUCT, {data: values}),
    onSuccess: () => {
      message.success('Product created successfully!')
      queryClient.invalidateQueries({queryKey: ['products']})
    },
    onError: () => message.error('Failed to create product.'),
  })

  const updateMutation = useMutation({
    mutationFn: (values: {id: number; name: string; price: number}) =>
      request(API_URL, UPDATE_PRODUCT, {
        data: {name: values.name, price: values.price},
        where: {id: Number(values.id)},
      }),
    onSuccess: () => {
      message.success('Product updated successfully!')
      queryClient.invalidateQueries({queryKey: ['products']})
    },
    onError: () => message.error('Failed to update product.'),
  })

  const deleteMutation = useMutation({
    mutationFn: (id: number) =>
      request(API_URL, DELETE_PRODUCT, {where: {id: Number(id)}}),
    onSuccess: () => {
      message.success('Product deleted successfully!')
      queryClient.invalidateQueries({queryKey: ['products']})
    },
    onError: () => message.error('Failed to delete product.'),
  })

  return {
    products: data?.products || [],
    isLoading,
    searchName,
    setSearchName,
    sort,
    setSort,
    createMutation,
    updateMutation,
    deleteMutation,
  }
}

This Custom Hook encapsulates the entire data interaction logic through the combination of graphql-request and @tanstack/react-query libraries, it manages searching states, list sorting and automatically triggers data cache refreshing (invalidateQueries) as soon as add, edit or delete actions succeed.

Create file app/graphql/ProductPageClient.tsx:

'use client'

import {
  DeleteOutlined,
  EditOutlined,
  PlusOutlined,
  SearchOutlined,
} from '@ant-design/icons'
import {
  Button,
  Form,
  Input,
  InputNumber,
  Modal,
  Popconfirm,
  Space,
  Table,
} from 'antd'
import {useState} from 'react'
import {useProductQueries} from './product.hook'

export default function ProductPageClient() {
  const [form] = Form.useForm()
  const [editingId, setEditingId] = useState<number | null>(null)
  const [isModalOpen, setIsModalOpen] = useState(false)

  const {
    products,
    isLoading,
    setSearchName,
    setSort,
    createMutation,
    updateMutation,
    deleteMutation,
  } = useProductQueries()

  const openModal = (record?: any) => {
    if (record) {
      setEditingId(record.id)
      form.setFieldsValue(record)
    } else {
      setEditingId(null)
      form.resetFields()
    }
    setIsModalOpen(true)
  }

  const closeModal = () => {
    setIsModalOpen(false)
    form.resetFields()
  }

  const handleSubmit = (values: any) => {
    if (editingId) {
      updateMutation.mutate(
        {id: editingId, ...values},
        {
          onSuccess: () => closeModal(),
        }
      )
    } else {
      const {id, ...createData} = values

      createMutation.mutate(
        createData,
        {
          onSuccess: () => closeModal(),
        }
      )
    }
  }

  const handleTableChange = (_pagination: any, _filters: any, sorter: any) => {
    const currentSorter = Array.isArray(sorter) ? sorter[0] : sorter

    if (currentSorter && currentSorter.order) {
      setSort({
        field: currentSorter.field,
        order: currentSorter.order === 'ascend' ? 'asc' : 'desc',
      })
    } else {
      setSort({field: null, order: null})
    }
  }

  const columns = [
    {title: 'ID', dataIndex: 'id', key: 'id', width: 80, sorter: true},
    {
      title: 'Product Name',
      dataIndex: 'name',
      key: 'name',
      sorter: true,
      className: 'font-semibold text-slate-700',
    },
    {
      title: 'Price',
      dataIndex: 'price',
      key: 'price',
      sorter: true,
      render: (price: number) =>
        price.toLocaleString(undefined, {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        }),
    },
    {
      title: 'Actions',
      key: 'actions',
      width: 180,
      render: (_: any, record: any) => (
        <Space size="middle">
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => openModal(record)}
          >
            Edit
          </Button>
          <Popconfirm
            title="Are you sure to delete this product?"
            onConfirm={() => deleteMutation.mutate(record.id)}
            okText="Yes"
            cancelText="No"
          >
            <Button
              type="link"
              danger
              icon={<DeleteOutlined />}
              loading={deleteMutation.isPending}
            >
              Delete
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  return (
    <div className="p-8 max-w-6xl mx-auto bg-slate-50 min-h-screen">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold text-slate-800">
          Products Management System
        </h1>
        <Button
          type="primary"
          className="bg-blue-600"
          icon={<PlusOutlined />}
          onClick={() => openModal()}
        >
          Add Product
        </Button>
      </div>

      <div className="bg-white p-4 rounded-lg shadow-sm mb-6">
        <Input
          placeholder="Search by product name..."
          className="max-w-xs"
          allowClear
          prefix={<SearchOutlined className="text-slate-400" />}
          onChange={e => setSearchName(e.target.value)}
        />
      </div>

      <div className="bg-white rounded-lg shadow-sm overflow-hidden">
        <Table
          dataSource={products}
          columns={columns}
          loading={isLoading}
          rowKey="id"
          pagination={{pageSize: 5}}
          onChange={handleTableChange}
        />
      </div>

      <Modal
        title={editingId ? 'Update Product' : 'Create New Product'}
        open={isModalOpen}
        onCancel={closeModal}
        onOk={() => form.submit()}
        okText="Save"
        confirmLoading={createMutation.isPending || updateMutation.isPending}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
          className="mt-4"
        >
          <Form.Item
            name="name"
            label="Product Name"
            rules={[{required: true, message: 'Please input product name!'}]}
          >
            <Input placeholder="Enter product name" />
          </Form.Item>
          <Form.Item
            name="price"
            label="Price"
            rules={[{required: true, message: 'Please input product price!'}]}
          >
            <InputNumber className="w-full" min={0} placeholder="0.00" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

This code creates a Client Component that manages the user interface tier, it provides a product list display table, modal-style entry fields, sorting event capturing (handleTableChange) and handles refining payloads appropriately depending on whether the task is creating or updating a record.

Create file app/graphql/page.tsx:

import {dehydrate, HydrationBoundary, QueryClient} from '@tanstack/react-query'
import {request} from 'graphql-request'
import {GET_PRODUCTS} from './product.graphql'
import ProductPageClient from './ProductPageClient'

const API_URL = process.env.NEXT_PUBLIC_GRAPHQL_HOST || ''

export default async function ProductsPage() {
  const queryClient = new QueryClient()

  await queryClient.prefetchQuery({
    queryKey: ['products', '', {field: null, order: null}],
    queryFn: () =>
      request(API_URL, GET_PRODUCTS, {where: undefined, orderBy: undefined}),
  })

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <ProductPageClient />
    </HydrationBoundary>
  )
}

This file defines a Server Component leveraging server-side rendering (SSR) capabilities, performs a prefetch mechanism to load the product list data early directly on the Node.js Server environment, then uses dehydrate to pack the data and forward it via HydrationBoundary down to the Client Component, bringing optimal display speed and enhancing user experience.


Checking the results will be like follows.





Happy coding!

See more articles here.

Comments

Post a Comment

Popular posts from this blog

All Practice Series

Image
Introduction This is a comprehensive page about the technologies I have shared in series format. You can view brief introductions and links to directly access each series you are interested in. In the field of software development, to deploy a product from the initial idea to its release, the standard process typically involves several stages as follows: Database : Designing and implementing the database according to business requirements, storing data during the system's operation. Backend : Handling the main logic of the system, communicating with the database and services. Frontend : Building the interface for users to interact with the system, which could be a desktop, mobile, or web application. This usually includes implementing UI/UX and integrating APIs from the backend. DevOps : Deploying the system for use, which can be done on a server or in the cloud. Testing : Applying testing methods to ensure the product meets the standards for release. Of course, these are just stan...
Read more

Kubernetes Deployment for Zero Downtime

Image
Introduction In Kubernetes (K8s) , a Pod is the smallest resource unit used to run one or more containers during deployment. There are several ways to create a Pod : you can create it directly, use a ReplicationController , or a ReplicaSet . However, the most commonly used resource for managing Pods is the Deployment . When you use a Deployment , it actually creates a ReplicaSet to manage the Pods but comes with many additional benefits that support the deployment process. Some Advantages of Deployment : Ensures Pod Availability : It guarantees that the specified number of Pods are always running according to the configuration, automatically deploying additional Pods if any failures occur. Supports Restart and Undo Deployment : Allows you to easily restart or roll back to previous versions of your Deployment . Zero Downtime Deployment : When updating configurations or scaling Deployments , zero downtime is crucial. This means that new Pods are created while the old Pods are stil...
Read more

Deploying a NodeJS Server on Google Kubernetes Engine

Image
Introduction to GKE Google Kubernetes Engine (GKE) is a managed Kubernetes service provided by Google Cloud Platform , facilitating simple and efficient deployment of Docker images. We only need to provide some configuration for the number of nodes, machine types, and replicas to use. Some Concepts Cluster A Cluster is a collection of Nodes where Kubernetes can deploy applications. A cluster includes at least one Master Node and multiple Worker Nodes . The Master Node is used to manage the Worker Nodes . Node A Node is a server in the Kubernetes Cluster. Nodes can be physical servers or virtual machines. Each Node runs  Kubernetes , which is responsible for communication between the Master Node and Worker Node , as well as managing Pods and containers running on it. Pod A Pod is the smallest deployable unit in Kubernetes . Each Pod contains one or more containers, typically Docker containers. Containers in the same Pod share a network namespace, meaning they have the ...
Read more

Setting up Kubernetes Dashboard with Kind

Image
Introduction In a previous article, I guided you through using Helm to deploy on Google Kubernetes Engine . However, if you want to cut down costs by using Kubernetes in your local environment instead of relying on a cloud provider during development, then Kind is your go-to. There are several tools to help set up Kubernetes locally, such as MiniKube , Kind , K3S , KubeAdm , and more. Each tool has its own pros and cons. In this article, I'll walk you through using Kind to quickly set up a Kubernetes cluster on Docker . Kind stands out for its compactness, making Kubernetes start up quickly, being user-friendly, and supporting the latest Kubernetes versions. Working with Kind Firstly, follow the instructions here to install Kind according to your operating system. If you're using Ubuntu , execute the command: [ $( uname -m ) = x86_64 ] && curl -Lo ./kind https://kind.sigs.k8s.io/dl/v0.23.0/kind-linux-amd64 chmod +x ./kind sudo mv ./kind /usr/local/bin/ki...
Read more

Monitoring with cAdvisor, Prometheus and Grafana on Docker

Image
Introduction Monitoring a system is crucial after deploying a product to a production environment. Keeping an eye on system metrics like logs , CPU , RAM , disks , etc, helps identify the system's status, performance issues, and provides timely solutions to ensure stable operations. While cloud providers like Google , Amazon , or Azure offer built-in monitoring systems, if your company needs to manage multiple applications/systems/containers and desires a centralized monitoring system for easier management, using cAdvisor , Prometheus , and Grafana is a sensible choice. These three popular open-source tools are widely used by DevOps teams, especially for monitoring container applications. cAdvisor Developed by Google , cAdvisor is an open-source project used to analyze resource usage, performance, and other metrics from container applications, providing an overview of all running containers. Find more details here Prometheus Prometheus is a toolkit for system monitoring and a...
Read more

Using Kafka with Docker and NodeJS

Image
Introduction to Kafka Kafka is an open-source , distributed messaging system that functions on a publish/subscribe model. It is widely used by numerous large companies for high-performance , real-time data streaming. Developed by LinkedIn since 2011, Kafka has grown into the most popular distributed streaming platform. It can handle vast amounts of records with high efficiency. Advantages of Kafka Open-source : Freely available and continuously improved by a large community. High-throughput, high-frequency : Capable of processing large volumes of data across topics continuously. Automatic message storage : Allows for easy message retrieval and verification. Large user community : Offers extensive support and shared resources. Basic Concepts If you're new to Kafka and Message Queues, here are some key concepts to understand: Producer : Creates and sends data to the Kafka server, where data is sent as messages in byte array format. Consumer : One or more consumers subscribe to...
Read more

Practicing with Google Cloud Platform - Google Kubernetes Engine to deploy nginx

Image
Introduction This article provides simple step-by-step instructions for those who are new to Google Cloud Platform (GCP) and Google Kubernetes Engine (GKE) . I'll guide you through using  GKE  to create clusters and deploy nginx . The instructions below will primarily use gcloud  and kubectl  to initialize the cluster, which is more convenient than manual management on the Google Cloud interface. Prerequisites First, you need to prepare the following: Have a GCP account with permission to use Cloud services. If you're new, you'll get a $300 free trial to use for 90 days . Create a new GCP project. Enable Compute Engine and Kubernetes Engine services. Install Google Cloud SDK and kubectl For this installation step, refer to the GCP documentation for instructions tailored to your operating system. Once installed, execute the following commands to check if gcloud  and kubectl  are installed: gcloud version kubectl version If you see the version resul...
Read more

Kubernetes Practice Series

Image
Introduction Kubernetes (often abbreviated as K8s ) is an open-source system designed to automate the deployment, scaling, and management of containerized applications. This page serves as a collection of articles related to Kubernetes (K8s) , including theoretical concepts and practical guides on using Kubernetes to set up essential tools for the software development process. I will continue to update this series with new articles as ideas come to mind, to ensure the series becomes more comprehensive. The articles are arranged in increasing order of difficulty to make it easier for you to follow. If you have time, it's recommended that you start from the beginning of the series to acquire the necessary knowledge and information that will prepare you for the subsequent articles. Key Topics Covered in This Series Basic Knowledge : Fundamental concepts, common commands, etc. Resources : Pod, Deployment, Service, StatefulSet, Ingress, etc. Pod Autoscaler : Horizontal and Vertical sc...
Read more

Sitemap

Image
A page aggregator designed for easy reference and search, compiling all blog posts for convenient access. Loading all posts...
Read more

DevOps Practice Series

Image
Introduction DevOps is a combination of development (Dev) and operations (Ops), aimed at uniting people, processes, and technology to enhance the software development lifecycle. Here are some key aspects of DevOps: Collaboration and Communication: DevOps fosters a culture where development, IT operations, quality engineering, and security teams work together seamlessly. Continuous Integration and Continuous Delivery (CI/CD): These practices automate the integration and delivery of code changes, ensuring faster and more reliable software releases. Infrastructure as Code (IaC): This approach involves managing and provisioning computing infrastructure through machine-readable scripts, rather than physical hardware configuration. Monitoring and Logging: Continuous monitoring and logging help teams to detect issues early and maintain system reliability. Automation: Automating repetitive tasks reduces errors and increases efficiency, allowing teams to focus on more strategic work. By impleme...
Read more