TypeScript faker plugin

[marocchino]

Hi 👋, Thank you for merge last PR.

I need auto generated mock object without launch extra server.

for example:

schema

type User {
  id: ID!
  "@faker name.findName"
  name: String!
  "@faker internet.email"
  email: String!
  age: Int
}

query

query User($id: ID!) {
   user(id: $id) {
      name
      email
      age
   }
}

will generate

import { UserQuery } from './generated-type';
import faker from 'faker';

export function userQueryMock(): UserQuery {
  return {
    user: {
      name: faker.name.findName(),
      email: faker.internet.email(),
      age: faker.datatype.number()
    }
  }
}

There will be a lot of customization for this plugin, but for now I want to start with a simple initial implementation.

[dotansimha]

Codegen doesn't deal with custom directives, mainly because it endless...
Also, moving to Discussions :)

[marocchino]

Oh, I see. Although the config is a little big, we can consider of define it in the config or create a separate json for configuration. Would this approach be okay? :)

[dotansimha]

Oh, I see. Although the config is a little big, we can consider of define it in the config or create a separate json for configuration. Would this approach be okay? :)

Yeah sure. I wonder if this is something that must be generated? Does mocking from graphql-tools isn't enough here?

I'm asking because mocking/faking data is specific to the runtime of the schema, while codegen plugins is mostly around the SDL of the schema.

[marocchino]

For some reason we don't have a client-side schema runtime. It just uses the json value received from the server on the client. It seems graphql-tools is a bit over-spec in this situation. And it is not automatically created according to schema update.

Partial customization will be required, but this generator will have default values for each scalar and enum type. So if we decide not to care about the contents of the field, we can fake data for most updates without much effort.

[ardatan]

I think you can mix https://www.graphql-tools.com/docs/mocking and https://www.graphql-tools.com/docs/schema-directives .
I didn't understand what you mean here;

And it is not automatically created according to schema update.

You can easily mock specific fields of specific type with faker. If you still want to go with directives direction, you can combine this with "Schema Directives". And this can be an opensource library that you can maintain independently.

But I agree with @dotansimha , Codegen might become "schema transformer" based on directives which might also lead a completely different direction we currently have if we start dealing with directives

[marocchino]

I think you can mix https://www.graphql-tools.com/docs/mocking and https://www.graphql-tools.com/docs/schema-directives .

Well, it's definitely possible. I have a schema and a query, but it's funny that I thought I couldn't create it. Thanks for letting me know. But, What's worth the importing schemas and queries rather than just function calls? 👀

1. Mocks generated with sdl make the code much simpler.
2. Contextually, I don't think the person writing the component test needs to know which query is being used.

import { someQueryMock } from './mock';

it('renders MyComponent', () => {
  const mock = someQueryMock()
  const responseState = {
    executeQuery: () => mock
  };

  const wrapper = mount(
    <Provider value={responseState}>
      <MyComponent />
    </Provider>
  );
});

import { makeExecutableSchema } from '@graphql-tools/schema';
import { addMocksToSchema } from '@graphql-tools/mock';
import { graphql } from 'graphql';

// Fill this in with the schema string
const schemaString = `...`;

// Make a GraphQL schema with no resolvers
const schema = makeExecutableSchema({ typeDefs: schemaString });

// Create a new schema with mocks
const schemaWithMocks = addMocksToSchema({ schema });

const query = `
query tasksForUser {
  user(id: 6) { id, name }
}
`;

it('renders MyComponent', () => {
  const responseState = {
    executeQuery: graphql(schemaWithMocks, query)
  };

  const wrapper = mount(
    <Provider value={responseState}>
      <MyComponent />
    </Provider>
  );
});