Setup

Install dependencies and serve your first schema

Dependencies

We have graphql as a peer dependency, and we recommend installing tslib for optimizing bundle sizes and performance. You'll need TypeScript to run our library. We also recommend installing ts-node-dev to have a more seamless developer experience.

# Instaling our library and two runtime dependencies:
npm install @whatsgood/uniform-graphql graphql tslib

# Installing our dev-dependencies:
npm install --save-dev ts-node-dev typescript

Uniform-GraphQL is built with strong type-safety in mind, and assumes that you are fully taking advantage of TypeScript's type system. With that in mind, here's our recommended tsconfig.json:

tsconfig.json
{
  "compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "lib": ["es2018", "esnext.asynciterable"],
    "alwaysStrict": true,
    "strict": true,
    "preserveConstEnums": true,
    "skipLibCheck": true,
    "importHelpers": true,
    "noImplicitReturns": true,
    "noImplicitThis": true
  }
}

GraphQL Server

In this tutorial, you will be building a schema through Uniform GraphQL, which you will serve through a GraphQL server of your choosing. We recommend Apollo Server.

# Installing Apollo Server and its peer dependency: express
npm install apollo-server-express express

We recommend adding a ts-node-dev script to your package.json. This will let you run your server in watch mode, which will keep seemlessly restarting the server process whenever it detects a file change. When you're done, you should have a package.json that roughly looks like this:

package.json
{
  // ...
  "scripts": {
    "start": "ts-node-dev --respawn ./src/index.ts"
  },
  "dependencies": {
    "@whatsgood/uniform-graphql": "^0.2.6",
    "apollo-server-express": "^2.19.0",
    "express": "^4.17.1",
    "tslib": "^2.1.0",
    "graphql": "^15.3.0"
  },
  "devDependencies": {
    "typescript": "^4.2.3",
    "ts-node-dev": "^1.1.6"
  }
}

Hello World

Let's spin up a very simple GraphQL server that has only one query named hello, which when run should resolve to "world". Start by creating the file below:

src/index.ts
import { ApolloServer } from 'apollo-server-express';
import express from 'express';
import { t, SchemaBuilder } from '@whatsgood/uniform-graphql';

// 1. Initialize a schema builder.
const schemaBuilder = new SchemaBuilder();

// 2. Create your first resolver.
schemaBuilder.query('hello', {
  type: t.string,
  resolve: () => 'world',
});

// 3. Build your schema and serve it.
const start = () => {
  const apolloServer = new ApolloServer({
    schema: schemaBuilder.getSchema(),
  });

  const app = express();
  apolloServer.applyMiddleware({ app });

  const PORT = 4001;
  app.listen({ port: PORT }, () => {
    const url = `http://localhost:${PORT}${apolloServer.graphqlPath}`;
    console.log(`🚀 Server ready at ${url}`);
  });
};

start();

Now from the root of your project, run npm run start. If everything worked out, you should now be able to point your browser to http://localhost:4001/graphql, and start interacting with your GraphQL server through GraphQL Playground. From there, run the following query to verify that your server is behaving as expected:

query {
  hello
}
Edit on GitHub