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.

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay