ericclemmonsgraphql-mock-object
Prototype your UI with GraphQL
mock { ... }objects before defining complex types & resolvers.
GraphQL works best as a backend for the frontend (BFF) that matches the structure of your UI. graphql-mock-object makes it simple for your UI to request data however you'd like. Once you're done prototyping, you can replace mocks with real resolvers and return real data.
Installation
I recommend saving into devDependencies, as prototyping is typically done in development, not production.
yarn add --dev graphql-mock-object
# ...or...
npm install --save-dev graphql-mock-objectThen add it to your application:
import { graphiqlExpress, graphqlExpress } from "apollo-server-express"
import bodyParser from "body-parser"
import express from "express"
import { makeExecutableSchema } from "graphql-tools"
// 👇 All the dependencies we need
import { mock, MockObject, typeDefs } from "graphql-mock-object"
const schema = makeExecutableSchema({
typeDefs: [
...typeDefs, // 👈 All the mock types we're dependent on
`type Query { version: String }`, // 👈 Your existing `Query`
`extend type Query { mock: MockObject! }`, // 👈 Add `mock` to `Query`
],
resolvers: {
MockObject, // 👈 This resolves all mock properties
Query: {
mock, // 👈 This is needed to query `mock`
version() {
return require("../../../package.json").version
},
},
},
})
// The rest of your app...
export const app = express()
.get("/", (req, res) => res.redirect("/graphiql"))
.use("/graphql", bodyParser.json(), graphqlExpress({ schema }))
.use("/graphiql", graphiqlExpress({ endpointURL: "/graphql" }))
.listen(3000, function(err) {
if (err) {
console.error(err)
return
}
console.log("Listening at http://localhost:3000")
})