This is a proof of concept showing how a <MockedProvider /> component can provide automated mocking of a given schema.

This has applications in the rendering of UI components in Storybook where access to an API may not be available.

1. GraphQL API generates schema.graphql file
2. <MockedProvider /> uses Babel macro to load that schema at build time (no running production or development instance of API required)
3. Apollo client is created with auto-mocked schema with addMocksToSchema from @graphql-tools/mock
4. <MockedProvider /> is used in Storybook to provide the mocked output to field requests

Input	Output

This approach (specifically, using the Babel macro to capture the schema at build time) means using Babel for compilation instead of tsc (which is still used, but post-build and strictly for creating .d.ts files).

This would likely mean that use of a component like <MockedProvider /> would call for a dedicated package.

useQuery and gql had to be exported from the same directory as the <MockedProvider /> otherwise Apollo would throw the following error: "Could not find "client" in the context or passed in as an option."

I found a bunch of reports about this error in relation to mixed use of @apollo/client and apollo-hooks and so on, but this felt different.

I am concerned it could suggest that the Babel compilation interferes in some way with the export, but could just be Storybook being a pain. Need more time on this, but would prefer to gauge interest first.

... Hope it all makes sense! ☺