Guides and Resources

Instant Mock

With InstantMock, developers and QA teams can create mock GraphQL endpoints on the fly, ensuring continuous progress even when backend APIs are not yet ready. 

When used with Narrative Studio, this open-source software enables teams to quickly collaborate on requirements and specifications, then visually build queries and mock endpoints with the full context, speed, and quality that come from Narrative Driven Development (NDD). 

Example of Using InstantMock with Narrative Studio

Imagine a query called “ProductDetails” attached to the Product Details Page of a user journey. In the screenshot below, we see an Interface construct with three attached assets: a Figma prototype or screenshot of the existing page, a specification, and the aforementioned "ProductDetail" query.

 

Product Details Page Interface with a Query called "ProductDetails"

To open InstantMock:

  • Click the query to open the popup menu and click the details icon.
  • This opens the details pane where the query is visible.

Here you can attach to a local or centralized InstantMock server, then use the dropdowns to select a graph and variant to connect to.

 

Query called 'ProductDetail' connected to InstantMock running on a localhost, using the swagshop a graph and the current (production) variant.

To visually or manually build a query, select Annotate Design. The visual query builder will read the selected graph and variant from your InstantMock server, allowing you to autofill when dragging items visually AND/OR typing a query. 

Using Annotate Design to Build a Query

  • Select Annotate Design. The Annotation window will open.
  • Click in the "Select or upload image" field to open a dropdown of available images and select one.
  • Click the green "Field" button and place a field on the corresponding design element. Alternately, drag and drop.
  • Type a field name into the annotation. It will appear in the query on the right. Or, type a field directly into the query; it will correspondingly appear on the design as an annotation.

For new fields that do not exist in a query, notice the red linting, such as with the description field below. 

Searching the 'swagshop a' graph's current variant visually. Description field does not exist within the schema, note the red linting.

Note that as of October 2024 the visual annotator only works with screenshots. Integration with live Figma designs is on the roadmap. 

The description field is linted in red to indicate it does not yet exist in the schema.

When you are ready to create your mock endpoint, select CREATE InstantMock and:

  • an ApolloGraphQL Schema Proposal will be automatically created
  • Narrative Studio will automatically connect you to the proposed variant linked to that schema proposal
  • an InstantMock GraphQL endpoint is created that can be used for testing and development such as http://localhost:3001/swagshop-a/p-39/graphql (link is available from the Query detail in the button next to InstantMock Server URL).

You are now ready to seed the data that you would like in your mock responses. To do this, you select "Run Query" and the system will generate mock data. Update the responses that you would like, click Seed, and your responses are instantly updated and available to your teams.

Working in Narrative Studio
Creating a New Organization
Guides and Resources
FAQ
Guides and Resources
Creating Your First Narrative
Working in Narrative Studio
Creating a New Workspace
Working in Narrative Studio
The Toolbar
Working in Narrative Studio
Narrative Scripts
Working in Narrative Studio
Constructs
Working in Narrative Studio
Working with Capabilities
Working in Narrative Studio
Working with Assets and Attachments
Working in Narrative Studio
Detail View
Working in Narrative Studio
Understanding Labels
Working in Narrative Studio
Working with Branching
Guides and Resources
Okta SSO Setup Guide
Working in Narrative Studio
Comments & Mentions
Guides and Resources
Instant Mock