What is the best way to modularize reducers and queries?

[BradyEdgar94]

I just switched over to using Type-GraphQL from Nexus and am loving it so far. However, there is one thing I am having issues with. I really like to have a more files, less code style of approach to my code, so I am trying to splice out my queries and mutations into their own files. The rough structure I am going with right now is:

graphql
  - Project
    - Projects
      - query.ts
      - mutation.ts
      - index.ts
    - ProjectById
      - query.ts
      - mutation.ts
      - index.ts

So I am trying to keep each component of the API into its own folder, then separate the queries and mutations into their own folders. Firstly if you have a better architecture I would love to hear it...This was my 2 am solution. This isn't my real issue though, the thing I am having trouble with is importing and using those queries/mutations into one ProjectsResolver. My solution just looks really messing.

I first define a Resolve in the index.ts file like so:

import { Context } from "graphql/server";
import { Args, Ctx, Query, Resolver } from "type-graphql";
import { Project } from "@generated/type-graphql";
import { AllProjectArgs, allProjects } from "./query";

@Resolver(Project)
export class ProjectResolver {
    @Query((_) => [Project], { nullable: true })
    async allProjects(
        @Args() { userId }: AllProjectArgs,
        @Ctx() { prisma }: Context
    ) {
        return await allProjects(userId, prisma)
    }
}

Then the allProjects function I imported from the queries.ts file looks like this:

import { ArgsType, Field, Int } from "type-graphql"
import { Project } from "@generated/type-graphql";

@ArgsType()
export class AllProjectArgs {
    @Field(_ => Int)
    userId: number;
}

export const allProjects = async (userId, prisma): Promise<Array<Project> | null> => {
    const projects = await prisma.project.findMany({
        where: { users: { some: { id: userId } } }
    })

    return projects
}

Right now this works but I want just one resolver for Projects, not a resolver for each sub folder under Projects. I also assume there is a cleaner way of splitting up these pieces of functionality.

I would love to hear your thoughts on how to tackle this and if you've done anything similar. Basically, what is the best way to keep my files small and easy to read.

Thanks!

[MichalLytek]

Why do you ask that question in this repo? It's about typegraphql-prisma code generator and you're just asking questions custom code organization tips 😛

I don't see any point of splitting resolver body into a separate queries.ts file, especially if your resolver has only one method.
It just force you to jump between different files instead of being able to analyse and understand the whole chunk of code.

If your resolvers perform some common tasks or contain some business-related logic, you should extract them to the service layer. It plays very well with classes and dependency injection. You can see that in examples on the main type-graphql repo. If it's only about database access (like prisma query), those classes can be named repository like the repository-pattern.

There is no best way because every developer, every team and every company has their own approaches. TypeGraphQL doesn't enforce anything.

I can only share one special advice, regarding your question:

The best way to modularize reducers and queries

Move files around until it feels right 😉
http://react-file-structure.surge.sh/

[BradyEdgar94]

Oops lol, sorry I thought this was in the Type-GraphQL repo 🤦 . Too many tabs open at 2am lol.

I will try and remove this question as it's not the right place to ask as you mentioned, thanks for your thoughts and opinion :)

[MichalLytek]

@BradyEdgar94 No problem, I've moved the discussion for you 😉