Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added support for nested fragments when importing from graphql/loader #227

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

mzalewski
Copy link

Used test from #105

Simplified import of nested fragments - uses the built-in graphql printer to get the full source including any nested fragments

Fixes the following situation:

AuthorDetailsFragment.gql

fragment AuthorDetails on Author {
    firstName
    lastName
}

BookDetailsFragment.gql

#import "./AuthorDetailsFragment.gql"
fragment BooksAuthor on Book {
    author {
        ...AuthorDetails
    }
}

main.js

import gql from 'graphql-tag';
import BookDetails from './BookDetailsFragment.gql';

const result = gql`query { ...BooksAuthor } ${BookDetails}`;

Previously, result would only include 2 definitions: the Query and the BooksAuthor fragment - and ignore the AuthorDetails fragment.

Now result should include all 3

@eltonio450
Copy link

we want this :)

@Thoum
Copy link

Thoum commented Dec 14, 2018

Oh yes ! we really need this too ! 😍
It's so bad not being able to nest fragments... 😢

Copy link
Member

@abernix abernix left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for looking into this!

@@ -1,6 +1,7 @@
var parser = require('graphql/language/parser');

var printer = require('graphql/language/printer');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While this probably solves the problem thanks the the providing of the much more complete and considerate printer module from graphql-js, introducing this would be adding the full weight of that printer to client bundles, no?

I'm not sure if that was the original reason for using the more simple implementation, but have you evaluated how this change affects bundle size?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't. Unfortunately haven't worked on any GraphQL projects in a while so haven't needed this.
I'll try to find some time over the next week to get back to this

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Our team could look at fixing this up so the printer doesn't get included in the client bundle. However, we've never worked on this code base, so have no idea where to start. Can someone provide guidance on an alternative approach that would be accepted? Is there another way we can help get this closer to being merged?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hwillson Looks like you're the most recent contributor to this code base. Is there any hope to get this merged, if we assist? How can we help? Just let us know, thanks :)

@gabsprates
Copy link

@mzalewski, any updates?

@kamaladenalhomsi
Copy link

kamaladenalhomsi commented Sep 11, 2019

I really need that feature too, hope reviewer merge this pull request

@IgorSzymanski
Copy link

It's been a while...

@nodabladam
Copy link

Our app just suffered a nasty bug traced to a point where developer tried a nested fragment and commented it out because it doesn't work and the hard coded attributes pasted in its place got out of sync with the original fragment. Please get this merged!

@manfioLP
Copy link

manfioLP commented Sep 3, 2020

any updates on this?

@mooori
Copy link

mooori commented Sep 11, 2020

As a workaround while this isn't merged, for me the following worked.

In the situation described by the OP, put the query in a separate .gql file:

# MyBookQuery.gql
#import "./BookDetailsFragment.gql"
# Above import includes nested AuthorDetailsFragment.

query MyBookQuery {
    book {
         ...BooksAuthor
    }
}
// main.js
const result = require("./MyBookQuery")

I'm using webpack as described here.

As a (positive) side effect, the gql import in main.js can be dropped.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet