graphql-mocks/graphql-mocks

Build web applications today against the GraphQL APIs of tomorrow.

GraphQL Mocks

Changelog | Contributing | Development | Packages & API

👋 Hello and welcome to GraphQL Mocks.

GraphQL Mocks is a set of libraries and tools to provide full end-to-end GraphQL mocking for node, the browser, and even as a localhost server.

This github repo contains the source code for the main core packages.

Check out the website for more information.

graphql-mocks's Issues

Create automated CHANGELOG

Creating an automated CHANGELOG that is added to as part of the release process will help identify breaking changes and also link out to the PRs that are included in changes for the various packages and their versions.

See lerna-changelog

Publish READMEs with packages

Going to npm for a package (example) shows an empty README. Packages should be published with a README with a brief introduction of the package and linking out to other documentation to get started. Adding keywords to the package.json would be helpful, too.

Add package entry @graphql-mocks/network-cypress on docs site

Add entry for @graphql-mocks/network-cypress on the list of packages, include typescript type docs.

Remove UMD builds

It doesn't appear the UMD builds are working correctly, they take a long time to build, and with hosted es module solutions it seems less beneficial to include. Both common js and es module options are included and this covers the majority of use-cases. This can always be revisited in the future.

Check support/compatibility with deno

The library is written with support for es modules in mind. Already GraphQL Mocks has very few dependencies and is written to be compatible with es modules, but with the recent support for deno and node modules there is likely no reason why GraphQL Mocks wouldn't work with deno out of the box. A deno-compatible network adapter might be worthwhile, too.

Add `gqlmocks init` command

This would init an entire project including the config, and interactively ask about the environment so that the proper network handlers could be used.

Would likely come after #146

Add support for custom directives

Similar to the custom scalars #221, adding custom directives adds support for a native GraphQL feature.

See apollo docs

Swap the faker library in @graphql-mocks/faker

Since the faker package is no longer maintained it should be swapped with a similar fake data package.

Add an extractState helper to be used within resolvers

The extractState similar to extractDependencies would be used to pull the state object from within resolvers.

Use `lodash-es`

Instead of using individual lodash packages using lodash-es would be a better "es module" player and work with browser playground environments like google's playground elements. Also being an es module package would allow any build tools/bundlers to treeshake as needed.

Add `gqlmocks playground` command

This would be a repl/interactive command to be able to send queries back and forth via the CLI with a GraphQL handler. This could also involve opening up a web app bundled with the handler.

Add a debugger wrapper

Adding a debugger wrapper could add the debugger keyword before/after a resolver and could make checking in and getting into a good point during a resolver much easier to inspect results. This would complement the logWrapper that already exists and provides logging. Using Highlight would also direct how/where the wrapper is applied.

CORS Issue

Steps to reproduce:

• Create a React app.

npx create-react-app my-app
cd my-app
npm start

• Replace index.js and App.js with the file contents here.
• Run the below command to start the mock server.

npx gqlmocks serve --schema ~/Codes/graphql_app/schema.graphql --fake

• Set the generated endpoint http://localhost:4444/graphql in App client.
• Start the app server.

npm start

and when I check my app in the browser, I'm getting the CORS-Error, screenshot is attached below.

Are any existing ways to fix this?

Add typescript guide to docs

The packages within GraphQL Mocks are written in typescript and there are some typescript features that can be used along with generated types from packages like from graphql codegen.

• Providing types for query results
• Being able to type resolver functions
• Typing GraphQL Paper documents
• Add { resolve: ResolverFn } | ResolverFn type ResolverMap types

network-msw package is not available

@graphql-mocks/network-msw doesn't seem to be a published package.

I was able to copy the source file directly, and it works locally, after updating it to use the MSW GraphQL api instead of REST.

Copy README.md into packages before publishing

Now that each package has its own README.md these should be published with the package in the dist folder. This means including likely adding a prepare script hook to all the packages to ensure that a copy is done. This would solve the issue of npm not showing any READMEs for the published packages.

Docusaurus (`docs` package) doesn't build on Node 16

When trying to do a server-side render that includes graphql-paper it fails to build and compile the part of the code involving the Event class. This is polyfilled in Node 14 but is not in Node 16. Either the polypill has to be forced or finding out why it's not available at the debugger.

Provide better onboarding experience for loading schemas

The GraphQLSchema is one of the dependencies used throughout this project. While graphql-mocks supports loading the schema in a variety of formats it doesn't provide guidance on how to get it from disk or url so that it can be specified as an argument to the GraphQLHandler.

This is also made confusing by the fact that gqlmocks cli has a handler that assumes you can just require the schema which is not the case when it's a schema.graphql and instead using a readFileSync(path).toString() is a quicker option but both can be hidden behind a utility function (in the node.js case).

• Improve the handler generator, possibly by providing guidance in a comment or a link to documentation on the options available
• Provide a node.js environment schema load function that can load from url, path and from formats as SDL, SDL_STRING, JSON. Much of this work is already done in the gqlmocks cli package but can be consolidated into a single useful function
• Write or link to documentation on how to load GraphQLSchema files in the front-end for the same formats as a node.js environment

Consider moving off of Lerna

Add export map to packages (and other helpful package.json fields)

This would help support CDN packagers like skypack, see: https://www.skypack.dev/view/graphql-mocks
It also reports I'm missing repository url and keyword properties.

Update docs

• Update mirage docs, old harry potter references are leftover and don't match the code examples
• Clarify that the Paper validators act on the new store snapshot and validators iterate over types or fields
• Note included by default -> Not included by default for nonNullFieldValidator
• Clarify the difference between layer and embed middlewares
• Illustrate graphql-mocks handler, wrapper, middleware system
• "Double-check that you've installed the graphql-mocks package also." should be the graphql package (page)
• yarn add --dev miragejs faker @graphql-mocks/faker graphql-mocks should not have miragejs in these docs
• Update applyMiddlewares example, imported middlewares are not the ones used in the documentation

Add directives support to GraphQLHandler

Similar to the custom scalars #221, adding custom directives adds support for a native GraphQL feature.

See apollo docs

Add internal logging

The logWrapper provides a way of logging what is happening within a resolver but it would be useful to be able to have logging set globally around queries/responses and wrapper/middleware processes. This would help people know if things like wrappers were being applied to the proper targets via their highlights or how the resolver map changes between middleware modifications.

• Adding Middlewares
• Wrappers
• Modification to Resolver Map
• Query, with inputs and Result (use console.group)

Bump minimum node version

Some dependencies are starting to drop support for Node 12 and since it's not currently supported. It would be good to bump all the packages here to a minimum of Node 14 which will have another year of maintenance support (see Node.js Releases).

Add ability to clear/reset/truncate a paper store instance

It would be useful to allow for a paper store to reset/cleared back to an empty state. This would be useful in tests for example where after each test you want to start over fresh. Resetting would be done by emptying the history by resetting current to an empty store like is done here during initialization.

Thanks @mammadataei for the feature idea.

Large schemas with many field resolvers experience slow initial `query`

The first query request on a handler is when the pack step runs. The pack step creates a final resolver map by running through all the resolver map middlewares. It then applies each resolver in the final resolver map to the handler's GraphQLSchema.

If using something like falso middleware where a falso resolver is attached to every field resolver and the schema happens to have a lot of fields then this step can be slow.

Various options so far:

• Make pack public and allow it to be called early via await handers.pack(). Guard against subsequent calls to pack running while the initial one is in flight, or just return the promise of the one that's in flight already.
• A "just in time" attachment of the resolvers based on the fields in the query. This would require parsing the query for its types and fields and then running through and applying the necessary field resolvers

Other things to investigate:

• Is it the combining of the middlewares into a single resolver map that is slow or the "attach" step where each resolver in the resolver map is attached to the handler's GraphQLSchema
• Optimizations in the various steps might bring down the overall time
• Being able to clone the handler instance or manage middlewares that have already been applied
• The stress test could be somewhere in the range of 2900 resolvers

Add a delay/latency resolver wrapper

Add a delay/latency resolver wrapper that could be used to delay resolution to mimic network time. Using Highlight this could be applied to just ['Query', '*'] or ['Mutation', '*'] for a total top-level slowdown or to specific resolvers that are expected/known to be slow. The arguments would ms representing the milliseconds to slow down or possibly a function that would return a number reflecting some random range of latency.

Split off spyWrapper to its own package

This would avoid the optional dependency from causing issues when it's not installed. The package (@graphql-mocks/spy) could include the raw wrapper and the middleware that applies it, it would have a peerDependency on sinon and that should clear things up with the core graphql-mocks package. The bit of overhead and boilerplate is likely worth it since the sinon spies are well tested and having a spyWrapper is not core or necessary for the main functionality of the graphql-mocks package.

Add `gqlmocks network *` commands

These would help scaffold out the network adapters used with graphql-mocks at handling/mocking the network layer in various environments. Before adding this command it would be better to add a few more network adapters for some missing environments.

Peer dependency issues

While installing graphql-mocks and @graphql-mocks/network-msw, I got a peer dependency error from npm:

npm ERR! Found: [email protected]
npm ERR! node_modules/graphql-mocks
npm ERR!   dev graphql-mocks@"^0.8.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer graphql-mocks@"^0.7.2" from @graphql-mocks/[email protected]

I can force the installation, but I wanted to let you know that the latest versions do not seem to match up correctly with each other.

Add pretender network handler

While msw provides a more realistic mocking experience, pretender provides a quicker setup although a bit more obscure in the way it monkey patches things. Pretender has been around for a bit and is used in mirage.js and has seen quite a bit of successful use in capturing network requests for mocking scenarios.

Vulnerability in graphql-paper > immer dependency

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ critical      │ Prototype Pollution in immer                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ immer                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=9.0.6                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ graphql-paper                                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ graphql-paper > immer                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://www.npmjs.com/advisories/1002492                     │
└───────────────┴──────────────────────────────────────────────────────────────┘

Resolving immer to ^9.0.6 doesn't seem to cause any problems, so I think it'll work as a drop-in upgrade. Haven't run the tests though.

Improve support for interfaces and unions in @graphql-mocks/falso

Currently there are some edge cases around automatic mocking with faker around interfaces and unions. Adding extra tests and support for these should make it more robust.

Cannot start server on different hostname

I am trying to run the npx gqlmocks serve inside the docker container.
Unfortunately, it seems that I cannot start the server on anything besides the localhost, which means that I cannot access the server from host machine.

I tried to explicitly set the hostname within the config, but it did not seem to help

npx gqlmocks serve --config gqlmocks.config.cjs --fake

gqlmocks.config.cjs

module.exports = {
  schema: {
    url: 'http://0.0.0.0',
    path: './schema.graphql'
  }
};