graphql generated types in separate package

[woss]

I'm using the monorepo where my client and other microservices use the same graphql package. to get the best out of the TS i compile the ts files to get the declaration files which fail if I don't have the @apollo/client installed. On the other hand if I have the @apollo/client installed in the graphql package then the react based client app fails with the following error:

Uncaught Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.

What should I do?

My current flow is when I change the LocalSchema i install the @apollo/client then build the files then uninstall it. this is painful, really painful :)

Source code files provided below:

the codegen.yml looks like this:

overwrite: true
schema:
  - '../../client/app/src/graphql/LocalSchema.graphql'
  - '../../../data/schema.graphql'
documents: '../../**/src/**/*.graphql'
config:
  scalars:
    Datetime: 'string'
    JSON: '{ [key: string]: any }'
generates:
  index.tsx:
    plugins:
      - add:
          content: '/* DO NOT EDIT! This file is auto-generated by graphql-code-generator - see `codegen.yml` */'
      - typescript
      - typescript-operations
      - typescript-react-apollo
    config:
      withHOC: false
      withComponent: false
      withHooks: true
      withMutationFn: true
      withRefetchFn: true
  nodes.ts:
    plugins:
      - add:
          content: '/* DO NOT EDIT! This file is auto-generated by graphql-code-generator - see `codegen.yml` */'
      - typescript
      - typescript-operations
      - typescript-document-nodes
      - typescript-graphql-request
    config:
      # noGraphQLTag: false
      rawRequest: true

and the structure looks like this:

❯ tree -L 1
.
├── codegen.yml
├── index.d.ts
├── index.js
├── index.js.map
├── index.tsx
├── node_modules
├── nodes.d.ts
├── nodes.js
├── nodes.js.map
├── nodes.ts
├── package.json
├── README.md
├── tsconfig.json
└── tsconfig.tsbuildinfo

[dotansimha]

Codegen code is just a wrapper around the original apollo hooks. If you are importing it, it should work the same way. Did you follow the rest of the Apollo "Getting Started" section? It seems like you have a missing Provider/client? https://www.apollographql.com/docs/react/get-started/#2-initialize-apolloclient

[woss]

hm, maybe i didn't explain correctly. the codegen is in a completely different package. without the apollo client, it cannot be compiled. for some reason when installing the apollo client it breaks with the error as I mentioned. prob the simplest way is to test it in Lerna monorepo, have 2 packages and load it into the gatsby app.

[woss]

yes, of course i followed the apollo. this is 1.5 years old repo :) maybe it is the issue with the gatsby + codegen. did you tested it with it?

[dotansimha]

Why not have that as devDependency? this way it can compile, but you don't need to install it with the package...
And yeah, we did. Keep in mind that codegen generated code is just a wrapper. if you get a runtime error, it might be related to apollo or gatsby...

[woss]

i cannot have it as a devDep because other packages are using the same files. I'll debug more and see maybe it is a gatsby issue. let's keep this open and I'll report back because I will be moving from the pnpm workspaces to rushjs + pnpm workspaces soon and then we can see what happens