Develop Using Mock Data

StepZen provides mock capabilities so you can interface your GraphQL API with systems that may not be fully functional or available yet. The following examples illustrate when mocking can be useful:

• You're working on a frontend that will 'plug in' to a GraphQL backend that is not available yet.
• You're looking to learn the structure of a GraphQL API but aren't picky about the data yet.
• You want to use mocks for testing.

This topic provides the following information about StepZen's mock capabilities:

• Set Up the Mock Query Inside a Schema: An example of using StepZen's @mock directive to mock an external API.
• The @mock Directive: Detailed information about @mock.

Set up the Mock Query Inside a Schema

Here's an example of a mock query set up inside a schema:

Copy
type Spacex_Info @mock {
  ceo: String
  cto_propulsion: String
  cto: String
  employees: Int
  headquarters: Address
}

type Query {
  spacex_info: Spacex_Info
    @graphql(
      endpoint: "https://api.spacex.land/graphql"
      prefix: { value: "Spacex_", includeRootOperations: true }
    )
}

spacex_info now returns mock data, since the type Spacex_Info is mocked. Note that the mock directive's presence means that @graphql will be ignored. Once the GraphQL backend becomes available during the development flow, removing the @mock directive will result in data being fetched from the SpaceX GraphQL API defined by @graphql.

Copy
query MyQuery {
  spacex_info {
    ceo
  }
}

returns

Copy
{
  "data": {
    "spacex_info": {
      "ceo": "Nunc feugiat mi a tellus consequat imperdiet"
    }
  }
}

The value returned for ceo is now a string of lorem ipsum.

The @mock Directive

StepZen's custom @mock directive mocks results type by type, so you can create mock queries in your schema. This can be helpful for creating stubs, because you can be sure that the returned value you test will be the same.

StepZen also makes use of another directive @mockfn. @mockfn works only when @mock is also enabled.

Its general format is the following:

Copy
  field: Type @mockfn(name: "functionName" values: [JSON])

Here, name is the name of the function filling in the mock type. They are listed below this paragraph. Some functions are configured using values, for example with List, values provides the possible values the function can return.

Here is a list of supported functions. The first four functions use values in @mockfn, the rest do not.

• FutureDate - select a Date up to N days into the future, where N is the first and only value in the list.
• List - select from the list of values.
• NumberRange - select a value between the first (lower) and second (upper) values in the list.
• PastDate - select a Date up to N days into the past, where N is the first and only value in the list.
• Email - a mocked email address
• FirstName - a first name
• LastName - a last name
• Phone - a phone number
• SSN - a mocked US social security number
• City - a mocked city
• Country - a mocked country
• CountryCode - a mocked country code (ISO 3166-1 alpha-2)
• Latitude - a mocked latitude
• Longitude - a mocked longitude
• Zip - a mocked US five digit zip code
• UUID - a mocked UUID
• DomainName - a mocked domain name
• DomainSuffix - a mocked domain suffix, e.g. org, com
• IPv4Address - a mocked IPv4 address as a string, e.g. 140.186.32.250
• IPv6Address - a mocked IPv6 address as a string, e.g. 2d84:26ad:91c9:b832:42b7:55e7:bf22:e737
• URL - a mocked URL
• Username - a mocked username
• CreditCard - a mocked credit card number, e.g. 2229798696491323.
• Currency - a mocked currency name, e.g. Bahamas Dollar
• CurrencyCode - a mocked currency code (ISO 4217)

PastDate and FutureDate are based on the current time, so the value returned from querying the field will be variable.

The mocked values are coerced to the type of the GraphQL field. This means that non-coercible values will evaluate to null, causing an error for non-nullable types.

Taking the example from above, the @mockfn directive is applied to the ceo field in the Spacex_Info type.

Copy
type Spacex_Info @mock {
  ceo: String @mockfn(name: "LastName")
  coo: String
  cto_propulsion: String
  cto: String
  employees: Int
  founded: Int
  founder: String
  headquarters: Address
}

Now the response will include a mock value.

Copy
{
  "data": {
    "spacex_info": {
      "ceo": "Smith"
    }
  }
}

This enables tests and mocks to be written in a more stable way. Again, each query that returns a type that is mocked will be mocked implicitly. This way you can mock multiple queries at once.