Bug? DuplicateFragmentName on typescript-react-query

[jonathanstanley]

Have been using this all for a while and working well, but today found an DuplicateFragmentName error:
Error: Validation error of type DuplicateFragmentName: There can be only one fragment named 'MetadataDetails' @ 'MetadataDetails':

I tried to setup a codesandbox and made a little progress, but after spending a couple hours trying to recreate the environment, i'm hoping these details will suffice.

When I use a query that has nested multiple-uses of the same fragments, the query tries to include the fragment multiple times. In the example below, Group has User, and BOTH have Metadata. When I query Group, I want Metadata for both Group and User. Instead of reusing the fragment, the generated code is repeating the fragment for each. Example below

document:

query groupDetails {
    group {
        admin {
            ...UserDetails
        }
        meta {
            ...MetadataDetails
        }
    }
}

fragment UserDetails on User {
    username
    email
    meta {
        ...MetadataDetails
    }
}

fragment MetadataDetails on Metadata {
    createdDate
    updatedDate
}

but when I use the generated code, the HTTP request has a query like this
note the duplicate MetadataDetails

query groupDetails {
    group {
        admin {
            ...UserDetails
        }
        meta {
            ...MetadataDetails
        }
    }
}

fragment MetadataDetails on Metadata {
    createdDate
    updatedDate
}

fragment UserDetails on User {
    username
    email
    meta {
        ...MetadataDetails
    }
}

"""BELOW UNWANTED; already included above"""
fragment MetadataDetails on Metadata {
    createdDate
    updatedDate
}

the repeated inclusion causes the DuplicateFragmentName error

update from my later post
Here is the problem showing in codesandbox with a generic example ( a blog post with an author and comments from other authors)

[jonathanstanley]

[Urigo]

@jonathanstanley maybe if it's hard to create a reproduction, you could try to create a failing test that replicates the situation?

[jonathanstanley]

Here is the problem showing in codesandbox with a generic example ( a blog post with an author and comments from other authors)

notice the generated code in types.ts:

1. BlogPostDocumentappends UserDetailsFragmentDoc and CommentDetailsFragmentDoc.
2. CommentDetailsFragmentDoc also appends UserDetailsFragmentDoc
3. therefore, the resulting graphql contains the UserDetailsFragmentDoc twice and results in graphql error: DuplicateFragmentName

[Urigo]

that's awesome, thank you for the reproduction!

Are you happy to try to reproduce this in a test?

[jonathanstanley]

I did spend a good chunk of time trying to create a unit test, but didn't get very far. Also, I'm not sure the approach you all might prefer to ensure those fragments are appended conditionally.

[Urigo]

Thank you for spending all this time already!
if you want, you can submit even your failed attempt and we could build on top of that.
I'll ping others to think also what is the right approach we want to take here in general.

Thank you for providing already great context

[jonathanstanley]

I believe this was fixed in #6668 scratch that. the request still contains duplicate fragments when sent over the network.