Create a new folder for the project and create a package.json file with the help of the CLI.
mkdir typescript-apollo-express-graphql-api
cd typescript-apollo-express-graphql-api
npm init --yes
Install Typescript and generate a tsconfig.json
file using npx
. We will also need nodemon
to compile our code on change, and ts-node to exec TypeScript files.
npm i typescript nodemon ts-node --save-dev
npx tsc --init --rootDir src --outDir dist --lib dom,es6 --module commonjs --removeComments
Create a /src
directory with a server.ts
file.
mkdir src && cd src && touch server.ts
Put some content in that file for testing purpose
// server.ts
console.log("Hey 👋");
Last step is to adjust scripts in the package.json
file as below:
"scripts": {
"start:dev": "npm run build:dev",
"build:dev": "nodemon src/server.ts --exec ts-node src/server.ts -e ts,graphql"
}
With that, you should be able to type npm run start:dev
in your terminal to start nodemon
and see our console.log
. Nodemon should also recompile if you change the code in the server.ts
file.
npm i apollo-server-express compression cors express graphql http ncp
npm i @types/compression @types/express @types/graphql @types/graphql-depth-limit @types/node graphql-depth-limit graphql-import graphql-import-node --save-dev
Change the content of server.ts
to this:
import express from "express";
import { ApolloServer } from "apollo-server-express";
import schema from "./schema";
import depthLimit from "graphql-depth-limit";
import cors from "cors";
import compression from "compression";
import { createServer } from "http";
const app = express();
const server = new ApolloServer({
schema,
validationRules: [depthLimit(7)],
});
app.use("*", cors());
app.use(compression());
server.applyMiddleware({ app, path: "/graphql" });
const httpServer = createServer(app);
httpServer.listen({ port: 3000 }, (): void =>
console.log("\n🚀 GraphQL is now running on http://localhost:3000/graphql")
);
First, let’s create our GraphQL Schema. In the /src
folder, create a /schema
folder and 1 file inside: schema.graphql
.
mkdir schema && cd schema && touch schema.graphql
Declare a Query type in it:
// schema.graphql
type Query {
helloWorld: String!
}
Then let’s quickly create a resolverMap
file in the /src
folder:
cd ../ && touch resolverMap.ts
// resolverMap.ts
import { IResolvers } from "graphql-tools";
const resolverMap: IResolvers = {
Query: {
helloWorld(_: void, args: void): string {
return "👋 Hello world! 👋";
},
},
};
export default resolverMap;
Finally create a schema file in the /src
folder that will be in charge of making an Executable GraphQL Schema:
touch schema.ts
// schema.ts
import "graphql-import-node";
import { GraphQLSchema } from "graphql";
import { makeExecutableSchema } from "graphql-tools";
import * as typeDefs from "./schema/schema.graphql";
import resolvers from "./resolverMap";
const schema: GraphQLSchema = makeExecutableSchema({
typeDefs,
resolvers,
});
export default schema;
Adjust the script in your package.json file as below:
"scripts": {
"start": "node 'dist/server.js'",
"build": "tsc -p . && ncp src/schema dist/schema",
"start:dev": "npm run build:dev",
"build:dev": "nodemon src/server.ts --exec ts-node src/server.ts -e ts,graphql"
}
Running npm run build
in your terminal will compile your code and put it in the /dist
folder. You can run the compiled code with npm start.
query allCourses {
helloWorld
}