Comments (26)
I don't see how this is fixed. I am still getting the
$fragmentRefs
after the update.
Running into the same issue, seems to be purely typescript related e.g.
(property) IItem:item {
' $fragmentRefs'?: {
ItemFragment: ItemFragment;
} | undefined;
}
(property) IHeader.item: {
' $fragmentRefs'?: {
ItemHeaderFragment: ItemHeaderFragment;
} | undefined;
}
Note: the item fragmentRefs
should contain the fragment type of the sub header fragment.
This is using client-preset
with React useFragment
as described in documentation.
A workaround is using an explicit cast e.g. item as FragmentType<typeof ItemHeaderFragment>
from graphql-code-generator-community.
I don't see how this is fixed. I am still getting the $fragmentRefs
after the update.
from graphql-code-generator-community.
I have the same problem. In my case, it's a fragment nested in another type. When the fragment is used somewhere, it generates a 2-level deeper structure to the type with $fragmentRefs
.
So, instead of: data.foo.bar
,
the generated type suggests using: data.foo[' $fragmentRefs']?.FooFieldsFragment.bar
which is wrong, because the actual data (in JavaScript) is at data.foo.bar
.
So far, I haven't found a workaround. I tried changing the settings for dedupeFragments
and inlineFragmentTypes
to no avail. Here are my codegen.ts
settings just for reference:
import type { CodegenConfig } from '@graphql-codegen/cli';
const config: CodegenConfig = {
overwrite: true,
schema: './schema.graphql',
documents: 'lib/graphql/*.ts',
generates: {
'src/__generated__/': {
preset: 'client',
plugins: [],
presetConfig: {
gqlTagName: 'gql',
},
},
},
ignoreNoDocuments: true,
};
export default config;
from graphql-code-generator-community.
I'm hitting this as well. Is there a fix in sight?
from graphql-code-generator-community.
@johannesbraeunig Can you please provide a reproduction or even better pr with a failing test for this?
from graphql-code-generator-community.
@n1ru4l I was able to narrow it down to the option dedupeFragments
. As soon as this option is enabled the imported fragment document doesn't get included in the fragment, while the import of the document of the imported fragment is still there.
Here is an example:
With dedupeFragment: false
:
- Config: https://codesandbox.io/s/gql-code-generator-without-dedup-fragments-nwucx?file=/codegen.yml:333-358
- The Fragment which imports a fragment: https://codesandbox.io/s/gql-code-generator-without-dedup-fragments-nwucx?file=/src/user.fragment.graphql
- The import of the fragment document in the generated file: https://codesandbox.io/s/gql-code-generator-without-dedup-fragments-nwucx?file=/src/user.fragment.generated.tsx:186-253
- The correct assignment of the fragment document definitions https://codesandbox.io/s/gql-code-generator-without-dedup-fragments-nwucx?file=/src/user.fragment.generated.tsx:1764-1802
With dedupeFragment: true
:
- Config: https://codesandbox.io/s/gql-code-generator-with-dedup-fragments-3o3jc?file=/codegen.yml:333-357
- The Fragment which imports a fragment: https://codesandbox.io/s/gql-code-generator-with-dedup-fragments-3o3jc?file=/src/user.fragment.graphql
- The import of the fragment document in the generated file: https://codesandbox.io/s/gql-code-generator-with-dedup-fragments-3o3jc?file=/src/user.fragment.generated.tsx:151-218
- The now missing document definition assignment: https://codesandbox.io/s/gql-code-generator-with-dedup-fragments-3o3jc?file=/src/user.fragment.generated.tsx:1722-1728
This is exactly what happens in our project using dedupeFragment
the option: All document definition assignments got deleted, while the import is still there. The respective query using the fragment which imports a fragment does assign all fragments.
This way we cannot use fragments, to read/write data to the cache, that import fragments because they do not contain the respective document definition of the imported fragment.
from graphql-code-generator-community.
@erikwrede See dotansimha/graphql-code-generator#8971
The dedupeFragments
option was broken by design and in the latest release we default to always inline definitions to avoid the limitations.
from graphql-code-generator-community.
Can confirm that this is fixed now, thanks for the help!
from graphql-code-generator-community.
I believe this changed in v2, as we got bit by this during the upgrade. Previously reading nested fragments worked fine, even with dedupeFragment
enabled.
from graphql-code-generator-community.
Experiencing this as well
from graphql-code-generator-community.
With dedupeFragments: false
, the server complains due to the same fragment being included multiple times in the same operation. So, we have to use dedupeFragments: true
. But, when we use it, the problem explained above happens. I have tried using dedupeFragments: true
only in certain plugins such as typescript-operations
, but that doesn't work either. I would expect the fragment definitions to be included in fragment docs, but get deduped in a smart way in operation docs.
Here is a really annoying workaround:
cache.writeFragment({
fragment: {
...FooBarFragmentDoc,
definitions: [
...FooBarFragmentDoc.definitions,
...NestedFragmentDoc.definitions,
...AnotherNestedFragmentDoc.definitions,
// ... any other fragment that's needed, add more of them as you get errors
],
},
fragmentName: 'FooBar',
data: {
// ...
}
});
fragment FooBar on FooBar {
# some fields
nested {
...Nested
}
}
fragment Nested on SomeType {
# some fields
something {
...AnotherNested
}
}
fragment AnotherNested on Something {
# some fields
}
from graphql-code-generator-community.
Adding search terms for people bumping into this:
With dedupeFragments: false
, when performing a query that invokes the same fragment multiple times, you get the message There can only be one fragment named \"fragmentName\".
.
With dedupeFragments: true
, when performing a readFragment
or writeFragment
with Apollo, with a fragment that invokes sub-fragments, you get the message No fragment named fragmentName
.
There is no fix for either at the moment on the latest versions, only the workaround mentioned by @yusufkandemir (which I can't apply in my codebase as it is too cumbersome).
from graphql-code-generator-community.
Someone from my team (@Titozzz) found a workaround:
In the config:
plugins: [
{
add: {
content:
'// @ts-ignore\nconst usedFragments: string[] = [];',
},
},
]
With a node_modules patcher (yarn 3 patch or patch-package for @graphql-codegen/visitor-plugin-common, /cjs/client-side-base-visitor.js
:
- return `{"kind":"${graphql_1.Kind.DOCUMENT}","definitions":[${definitions}]}`;
+ return `{"kind":"${graphql_1.Kind.DOCUMENT}","definitions":[${definitions}].filter(x => x.kind !== "FragmentDefinition" || !usedFragments.includes(x.name.value) && usedFragments.push(x.name.value))}`;
It might not be safe so use with caution :) Until a real fix can be worked on!
from graphql-code-generator-community.
I spent a while wondering why these issues occur. I have the same issues as you @yusufkandemir, but I also stand with @adrienharnay that this is too cumbersome. For now, I will try to avoid reading fragments, which is a shame.
from graphql-code-generator-community.
Have just run into this as well. Are there any updates on a forthcoming fix or better workarounds?
from graphql-code-generator-community.
I believe the issue with dedupeFragments
typed-document-node
codegen in general is, that the MyFragmentDoc
s are re-used in the in the executable OperationDefinition
s. That way, it isn't possible to have the fragments include the nested fragments when using dedupeFragments
. Instead, the fragments would need to be generated as Standalone Fragments, including the dependencies.
However, it is mentioned in the main repo, that dedupeFragments
is deprecated:
Does that mean, that in the future everyone will run into this problem, or is there now another way around dedupeFragments
?
from graphql-code-generator-community.
@n1ru4l thanks for the quick reply! Please excuse the confusion and using this thread to ask, but which version of codegen do I need to use to try this out? I'm on graphql-codegen/cli
, but the PR says the release is in graphql-cli/codegen
- however, I can't find it in any of the release notes.
from graphql-code-generator-community.
@erikwrede @graphql-codegen/[email protected]
, see the changelog: https://github.com/dotansimha/graphql-code-generator/releases/tag/release-1676995873
from graphql-code-generator-community.
Cool, I am going to close this issue then. π₯³
from graphql-code-generator-community.
Hello @n1ru4l, thank you for the fix that seems to work on my side too (I need to test more). However, it seems fragments are still imported even if they are not used, which results in TS errors. Is this an oversight in the refactoring or something I'm doing wrong?
from graphql-code-generator-community.
Interesting, I don't observe this behavior. Have you got an example @adrienharnay?
from graphql-code-generator-community.
Yes @erikwrede , here you go: https://codesandbox.io/s/gql-code-generator-without-dedup-fragments-forked-35lp34?file=/src/user.fragment.generated.tsx
Run yarn codegen
and check the user.fragment.generated
file and you will see an unused import of AddressFragmentDoc
from graphql-code-generator-community.
@adrienharnay Please open a new issue for this, can you help fixing it?
from graphql-code-generator-community.
Hi @n1ru4l, I just created the issue: #289. I can help fixing it but would need the help of the person who did the refactoring I guess?
from graphql-code-generator-community.
Hi @n1ru4l , I opened a PR: dotansimha/graphql-code-generator#9136
from graphql-code-generator-community.
I was able to work through this a different way to @dwknippers by using the codegen generated useFragment
helper (not hook).
Where I was casting as they recommended above with...
const someInaccessibleData = data.someInaccesibleData as SomeInaccessibleFragment
I'm now doing
import { SomeInaccessibleFragmentDoc } from './generated-types-location' // not the Fragment, but the FragmentDoc
import { useFragment } from './generated-fragment-masking-location'
...
const someInaccessibleData = useFragment(SomeInaccessibleFragmentDoc, data.someInaccessibleData)
Your linter might then complain about what appears to be a use
hook, however codegen have notes on this within their docs and provide a work-around here
After making the recommended change to the useFragment
naming convention, I end up with const someInaccessibleData = getFragmentData(SomeInaccessibleFragmentDoc, data.someInaccessibleData)
and have access to the types from the fragment where they were previously out of reach.
@thexpand tagging you because my problem was exactly the same as yours.
from graphql-code-generator-community.
Related Issues (20)
- Feature Request: expose queryOptions of react-query v5
- Feature request: [java & kotlin] Generate types as interfaces
- Dotnet code gen does not work on the website HOT 1
- defaultBaseOptions value is not exported in generated file
- Allow toggling useSuspenseQuery generation HOT 2
- [java] generated enum arguments lack validation HOT 2
- [react-apollo] Add support for `useLoadableQuery`
- skipToken support for typescript-react-apollo HOT 3
- [Java] Reserved keyword "case" used in generated code
- Ability to use the core API in `typescript-react-apollo`
- Implement a graphql-codegen plugin that outputs a client SDK written in Effect
- Data should be null when an error occurs
- Cannot import typescript operation definition file with 'near-operation-plugin' and document: external
- I get Cannot redeclare block-scoped variable with client preset
- Doc fix for an extra apostrophe in the code example for additionalDI (apollo-angular config.)
- [RTK-Query] Hook generator does not match InjectedAPI typings when typings are not in pascalCase HOT 1
- useFragment does not support variables or other base options
- Flutter json_serializable use `JsonValue` as the json key of Enum
- GraphQL to FLutter Drift
- Codegen generates unused types from the schema
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from graphql-code-generator-community.