Customizations

[Roberto Wesley Overdijk]

After the code generation is done, you will notice the following files

I have a couple of questions

• Is it possible to define custom file names?
• Is it possible to define dynamic paths?
• Is it possible to group queries and mutations based on their tags (endpoint/resource) instead of having everything in one file. Using the operationId for the query is very lengthy.

I found the plugins, but it doesn't look very easy to write my own since theyre pretty baked in (relative imports and such).

Regardless, this looks super promising!

Edit: closed/reopened as I updated my original issue

[Fabien BERNARD]

Is it possible to define custom file names?
You have a filenamePrefix param that you can tweak and if you really don't like the pattern I choose all files are created with context.writeFile.

You can then give your own function 😃

import {
  generateSchemaTypes,
  generateReactQueryComponents,
} from "@openapi-codegen/typescript";
import { defineConfig } from "@openapi-codegen/cli";

export default defineConfig({
  github: {
    from: {
      source: "url",
      url: "https://api.apis.guru/v2/specs/github.com/1.1.4/openapi.yaml",
    },
    outputDir: "src/github",
    to: async (context) => {
      context.writeFile = (file, data) => {/* */}
      
      const filenamePrefix = "github";
      const { schemasFiles } = await generateSchemaTypes(context, {
        filenamePrefix,
      });
      await generateReactQueryComponents(context, {
        filenamePrefix,
        schemasFiles,
      });
    },
  },
});

Is it possible to group queries and mutations based on their tags (endpoint/resource) instead of having everything in one file. Using the operationId for the query is very lengthy.

The easiest way to do this is probably to cut your spec by tags and use the generator multiple times. the configuration file is nothing else than TypeScript for this reason, so you can tweak it for your needs. You can have a look a the context object, you have context.openAPIDocument with all your specs, you "just" have to do a bit of data manipulation and you should be good to go ;)

[Roberto Wesley Overdijk]

That sounds cool, I'll play around with it a bit! I'll also try to see if I can change the generated code output. It's a hobby project to explore what I want to use as my next stack, so I can go wild 😄

Edit: I'm also trying to find out how this works in a monorepo. It'll have to be built so it can be used in the frontend. My idea is to have it in packages/contract so that all my clients (web, react native and a dashboard) can use the same queries. Might be a nice example to have?

[Fabien BERNARD]

The configuration file can handle as many keys (projects) as you want, Since this is TypeScript you can also factor out some params .

Something like this:

import {
  generateSchemaTypes,
  generateReactQueryComponents,
} from "@openapi-codegen/typescript";
import { defineConfig } from "@openapi-codegen/cli";
import { Context } from "@openapi-codegen/cli/lib/types";

const from = {
  source: "url",
  url: "https://api.apis.guru/v2/specs/github.com/1.1.4/openapi.yaml",
} as const;

const to = async (context: Context) => {
  const filenamePrefix = "github";
  const { schemasFiles } = await generateSchemaTypes(context, {
    filenamePrefix,
  });
  await generateReactQueryComponents(context, {
    filenamePrefix,
    schemasFiles,
  });
};

export default defineConfig({
  githubPackage1: {
    from,
    to,
    outputDir: "package1/github",
  },
  githubPackage2: {
    from,
    to,
    outputDir: "package2/github",
  },
  githubPackage3: {
    from,
    to,
    outputDir: "package3/github",
  },
});

[Roberto Wesley Overdijk]

I prefer having it in a package directory that maintains itself, but it's not working in combination with nextjs yet.

I keep getting:

Error: No QueryClient set, use QueryClientProvider to set one

But I do have a QueryClient, and useQuery works. It's just the generated code that doesn't.

I'm closing this issue for now, you've answered my original questions 😄

[Fabien BERNARD]

But I do have a QueryClient, and useQuery works. It's just the generated code that doesn't.

Strange, the generated code is very straight forward, maybe you are trying a query outside of the Provider… This is definitely working with nextjs, I did it before 😉 So this is something in your setup

[Roberto Wesley Overdijk]

I am not trying to query outside of the provider. It's extra strange because useQuery works but the generated code doesn't. Maybe it's because I transpile it in a mono repo package. If I find the reason I'll share it 😄