sharing / importing fragments across packages in a monorepro

[twmillett]

Hopefully this gives the gist of what the setup in question looks like: https://codesandbox.io/s/optimistic-saha-hyyy4

If you look at codegen.yml, we're able to reference baseTypesPaths using the (~) package relative import and that works great. My question is, how do we get similar package relative imports for these fragment imports, too?

packages/my-operation/__generated__/usernameQuery.interface.ts:

import { UsernameFragmentFragment } from '../../my-fragment/__generated__/usernameFragment.interface';
import { UsernameFragmentFragmentDoc } from '../../my-fragment/__generated__/usernameFragment.interface';

I saw this issue that seemed somewhat related mentioning skipGraphQLImport, but it's not clear to me how to use that.

Part of my confusion probably comes from not understanding when/if these style imports are required, since these don't seem to change the code generator's behavior (?)

#import "my-fragment/usernameFragment.graphql"

Thanks for any pointers!

[twmillett]

I found this option, importAllFragmentsFrom, which does appear to accept the ~ relative package name.

importAllFragmentsFrom: ~my-fragments

Although if I understand it correctly, this will require all fragments to be exported from the same hard-coded package name, which might turn into a pretty heavy download package?

[twmillett]

And, importAllFragmentsFrom looks like it supports providing a function, which would give a lot of flexibility, but I'm guessing that's only available via the programmatic interface (i.e., there's no way to specify a script via cli/codegen.xml?)

[dotansimha]

You are right, it's currently only available through programmatic api. I created an issue for that: #4936 (PRs are welcome ;) )

[DianaSuvorova]

I have very similar set up (monorepo and fragments used across packages) , so decided to follow up on this thread.

In my case I use programmatic API so in theory we should be able to leverage importAllFragmentsFrom option. Although it does not seem to do any difference.

The only way I am able to make the monorepo set up work is to include the fragments package into document loader.

  const documents = await loadDocuments(["./packages/my-operation/*.js", "./packages/my-fragment/*.js"], {
    loaders: [new CodeFileLoader()]
  });

Which completely defeats the purpose since there is no way to pre-filter loaded documents and will imply parsing whole monorepo which is impractical.

Would very much appreciate any advice on the proper set up.

Below is a snippet of my codegen and complete repro: https://codesandbox.io/s/weathered-wave-pe13el?file=/codegen.js

cc @dotansimha

const runConfigurations = await preset.buildGeneratesSection({
    presetConfig: {
      folder: "__generated__",
      baseTypesPath: "types.js",
      extension: ".js",
      importAllFragmentsFrom: (args) => {
        return "./packages/my-fragment/*.js";
      }
    },
    baseOutputDir: "./src/",
    schemaAst: schema,
    schema: graphql.parse(graphql.printSchema(schema)),
    config: {
      skipDocumentsValidation: true
    },
    documents,
    plugins: [
      {
        "flow-operations": {}
      }
    ],
    pluginMap: {
      "flow-operations": flowOperationsPlugin
    }
  });