I’m writing an application in react and using a mock server until our backend is ready.
We use codegen.
Here is a simplified version of our scheme
Any string
Example: 9f06ce7cdca9ed9c074d33c4c9
scalar Cursor
YYYY-MM-DDTHH:mm:ssZ
Example: 2021-02-04T12:17:51Z
scalar DateTime
type Query {
player(id: ID!): Player!
players(
search: String!
after: Cursor
before: Cursor
first: Int
last: Int
): PlayerConnection!
}
type Player {
id: ID!
restrictions (
first: Int
last: Int
): RestrictionConnection!
}
type Restriction {
id: ID!
updatedAt: DateTime!
createdAt: DateTime!
lockedAt: DateTime!
}
type RestrictionConnection {
edges: [RestrictionEdge!]!
}
type RestrictionEdge {
cursor: Cursor!
node: Restriction!
}
type PlayerConnection {
edges: [PlayerEdge!]!
}
type PlayerEdge {
cursor: Cursor!
node: Player!
}
Our server looks like this
import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';
import { addMocksToSchema } from '@graphql-tools/mock';
import faker from 'faker';
const generateNodes = (nodeGenerator, limit) => {
const data = [];
for (let i = 0; i < limit; i += 1) {
data.push(nodeGenerator(i));
}
return data;
};
const relayConnection = (data) => {
return {
edges: data,
pageInfo: {
hasNextPage: false,
hasPreviousPage: false,
startCursor: 0,
endCursor: 1,
},
};
};
const createConnectedNode = (index, node) => ({
cursor: `cursor_${index}`,
node,
});
const mocks = {
DateTime: () => '2020-04-06T05:36:22.291Z',
Cursor: () => `cursor_${faker.datatype.uuid()}`,
};
interface Typescript {
// what type should this be?
}
const generateRestriction = (): Typescript => ({
id: faker.datatype.uuid(),
createdAt: faker.date.past(),
updatedAt: faker.date.past(),
lockedAt: faker.date.past(),
__typename: 'typename',
});
const generateRestrictions = () => {
const generator = (i) => createConnectedNode(i, generateRestriction({}));
return generateNodes(generator, faker.datatype.number({ min: 10, max: 20 }));
};
const restrictions = generateRestrictions();
const generatePlayer = (id): Typescript => {
return {
id,
restrictions: (args) => {
if (args && args.first) {
return relayConnection(restrictions, args);
}
return restrictions;
},
};
};
const generatePlayers = () => {
const generator = (i) => createConnectedNode(i, generatePlayer(i.toString()));
return generateNodes(generator, 10);
};
const players = generatePlayers();
const resolvers = (): Typescript => ({
Query: {
player: (obj, { id }) => {
const player = players.find((item) => item.node.id === id);
return player ? player.node : null;
},
players: (obj, args) => {
let filteredData;
if (args.search) {
filteredData = players.filter((item) =>
item.node.name.toLowerCase().includes(args.search.toLowerCase())
);
}
return relayConnection(filteredData || players, args);
},
},
});
const init = async () => {
const schema = await loadSchema('scheme', {
loaders: [new GraphQLFileLoader()],
});
const server = new ApolloServer({
schema: addMocksToSchema({
schema,
resolvers,
mocks,
}),
});
const { url } = await startStandaloneServer(server, {
context: async ({ req }) => ({ token: req.headers.token }),
listen: { port: 4000 },
});
console.log(`🚀 Server ready at ${url}`);
};
init();
I want to write types to our resolvers and in the places where I specified :Typescript
instead Real type.
So far I have not been able to write examples, although I have used different methods, uncluding @graphql-codegen/typescript-resolvers
Perhaps, I have chosen the wrong approach and need to change resolvers and mocks