Step 1: 创建项目

1
2
3
4
mkdir graphql-example
cd graphql-example

npm init --yes && npm pkg set type="module"

Step 2: 安装依赖

1
2
npm install @apollo/index graphql

使用JS

1
touch index.js

修改 package.json 添加启动

1
2
3
4
5
6
7
8
{
  // ...etc.
  "type": "module",
  "scripts": {
    "start": "node index.js"
  }
  // other dependencies
}

Step 3: 定义 GraphQL schema

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { ApolloServer } from '@apollo/index';
import { startStandaloneServer } from '@apollo/index/standalone';

// A schema is a collection of type definitions (hence "typeDefs")
// that together define the "shape" of queries that are executed against
// your data.
const typeDefs = `#graphql
  # Comments in GraphQL strings (such as this one) start with the hash (#) symbol.

  # This "Book" type defines the queryable fields for every book in our data source.
  type Book {
    title: String
    author: String
  }

  # The "Query" type is special: it lists all of the available queries that
  # clients can execute, along with the return type for each. In this
  # case, the "books" query returns an array of zero or more Books (defined above).
  type Query {
    books: [Book]
  }
`;

Step 4: 定义数据集

1
2
3
4
5
6
7
8
9
10
const books = [
  {
    title: 'The Awakening',
    author: 'Kate Chopin',
  },
  {
    title: 'City of Glass',
    author: 'Paul Auster',
  },
];

Step 5: 定义 resolver

1
2
3
4
5
6
// Resolvers 定义如何从schema中获取数据
const resolvers = {
  Query: {
    books: () => books,
  },
};

Step 6: 创建服务器实例

单独使用

1
2
3
4
5
6
7
8
9
10
11
12
// 用 schema 和 resolvers 创建 server
const index = new ApolloServer({
  typeDefs,
  resolvers,
});

//  启动单独的服务
const { url } = await startStandaloneServer(index, {
  listen: { port: 4000 },
});

console.log(`🚀  Server ready at: ${url}`);

和Express一起使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const index = new ApolloServer({typeDefs, resolvers});

await index.start();

const app = express();

index.applyMiddleware({app, path: '/api'})

const PORT = process.env.PORT || 4000;
const DB_HOST = process.env.DB_HOST || 'localhost';

db.connect(DB_HOST);
app.listen({PORT}, () => {
  console.log(`App at http://localhost:${PORT}`);
  console.log(`GQL at http://localhost:${PORT}${index.graphqlPath}`);
});

Step 7: 运行

1
npm start
1
🚀  Server ready at: http://localhost:4000/

Step 8: 打开网页查询