DEV Community

Mehedi Hasan
Mehedi Hasan

Posted on

Starter template for use graphql-yoga with express(typescript)

Here’s a starter template to set up a TypeScript project using express with graphql-yoga for a GraphQL server.

Steps

  1. Initialize the Project: First, set up a new Node.js project.
mkdir graphql-yoga-express && cd graphql-yoga-express
npm init -y
Enter fullscreen mode Exit fullscreen mode
  1. Install Dependencies: Install the required packages.
npm install express graphql graphql-yoga
npm install -D typescript ts-node @types/express @types/node
Enter fullscreen mode Exit fullscreen mode
  1. Set Up TypeScript: Initialize TypeScript configuration.
npx tsc --init
Enter fullscreen mode Exit fullscreen mode

Adjust your tsconfig.json (optional but recommended changes):

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. Project Structure: Create the following project structure.
graphql-yoga-express
├── src
│   ├── index.ts         # Entry point of the server
│   ├── schema.ts        # Define GraphQL schema and resolvers
├── package.json
├── tsconfig.json
Enter fullscreen mode Exit fullscreen mode
  1. Create GraphQL Schema and Resolvers: Inside src/schema.ts, define a basic schema and resolver.
// src/schema.ts
import { createSchema } from 'graphql-yoga';

const typeDefs = /* GraphQL */ `
  type Query {
    hello(name: String): String!
  }
`;

const resolvers = {
  Query: {
    hello: (_: unknown, { name }: { name: string }) => `Hello, ${name || 'World'}!`,
  },
};

export const schema = createSchema({
  typeDefs,
  resolvers,
});
Enter fullscreen mode Exit fullscreen mode
  1. Set Up the Server with Express: Inside src/index.ts, create an Express server and use graphql-yoga middleware.
// src/index.ts
import express from 'express';
import { createYoga } from 'graphql-yoga';
import { schema } from './schema';

const app = express();

const yoga = createYoga({ schema });
app.use('/graphql', yoga);

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

app.listen(PORT, () => {
  console.log(`Server is running at http://localhost:${PORT}/graphql`);
});
Enter fullscreen mode Exit fullscreen mode
  1. Run the Server: Add a script to package.json for running the server in development mode.
"scripts": {
  "start": "ts-node src/index.ts"
}

Enter fullscreen mode Exit fullscreen mode

Then, start the server:

npm start
Enter fullscreen mode Exit fullscreen mode

Test the GraphQL Endpoint

Open http://localhost:4000/graphql in your browser, and test the query:

query {
  hello(name: "GraphQL-Yoga")
}
Enter fullscreen mode Exit fullscreen mode

You should receive a response like:

{
  "data": {
    "hello": "Hello, GraphQL-Yoga!"
  }
}
Enter fullscreen mode Exit fullscreen mode

This setup provides a basic Express server with graphql-yoga as the GraphQL layer. You can expand the schema and resolvers as needed.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay