json-to-graphql-query
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    json-to-graphql-query

    This is a simple module that takes a JavaScript object and turns it into a GraphQL query to be sent to a GraphQL server.

    Mainly useful for applications that need to generate graphql queries dynamically.

    New Maintainer!

    Huge thanks to @vkolgi for agreeing to take over maintenance of this library! I look forward to following its continued development. - @dupski

    Installation

    npm install json-to-graphql-query
    

    Usage

    const query = jsonToGraphQLQuery(queryObject: object, options?: object);

    Supported Options:

    • pretty - boolean - optional - set to true to enable pretty-printed output
    • ignoreFields - string[] - optional - you can pass an array of object key names that you want removed from the query
    • includeFalsyKeys - boolean - optional - disable the default behaviour if excluding keys with a falsy value

    Features

    • Converts a JavaScript object to a GraphQL Query string
    • Full support for nested query / mutation nodes and arguments
    • Optionally strip specific object keys using the ignoreFields option
    • Support for input arguments via __args
    • Support for query aliases via __aliasFor
    • Support for Enum values via EnumType
    • Support for variables via __variables
    • Support for simple directives (such as @client) via __directives
    • Support for one or more inline fragments via __on.__typeName
    • Support for full fragments via __all_on
    • Support for named queries/mutations via __name

    Recent Changes

    See the CHANGELOG

    Simple Query

    import { jsonToGraphQLQuery } from 'json-to-graphql-query';
    
    const query = {
        query: {
            Posts: {
                id: true,
                title: true,
                post_date: true
            }
        }
    };
    const graphql_query = jsonToGraphQLQuery(query, { pretty: true });

    Resulting graphql_query

    query {
        Posts {
            id
            title
            post_date
        }
    }

    Query with arguments

    import { jsonToGraphQLQuery } from 'json-to-graphql-query';
    
    const query = {
        query: {
            Posts: {
                __args: {
                    where: { id: 2 }
                    orderBy: 'post_date'
                },
                id: true,
                title: true,
                post_date: true
            }
        }
    };
    const graphql_query = jsonToGraphQLQuery(query, { pretty: true });

    Resulting graphql_query

    query {
        Posts (where: {id: 2}, orderBy: "post_date") {
            id
            title
            post_date
        }
    }

    Query with nested objects

    import { jsonToGraphQLQuery } from 'json-to-graphql-query';
    
    const query = {
        query: {
            Posts: {
                id: true,
                title: true,
                comments: {
                    id: true,
                    comment: true,
                    user: true
                }
            }
        }
    };
    const graphql_query = jsonToGraphQLQuery(query, { pretty: true });

    Resulting graphql_query

    query {
        Posts {
            id
            title
            comments {
                id
                comment
                user
            }
        }
    }

    Query with disabled fields

    import { jsonToGraphQLQuery } from 'json-to-graphql-query';
    
    const query = {
        query: {
            Posts: {
                id: true,
                title: false,
                comments: {
                    id: true,
                    comment: false,
                    user: true
                }
            },
            User: false
        }
    };
    const graphql_query = jsonToGraphQLQuery(query, { pretty: true });

    Resulting graphql_query

    query {
        Posts {
            id
            comments {
                id
                user
            }
        }
    }

    NOTE: You can tell jsonToGraphQLQuery() not to exclude keys with a falsy value by setting the includeFalsyKeys option.

    Using aliases

    import { jsonToGraphQLQuery } from 'json-to-graphql-query';
    
    const query = {
        query: {
            allPosts: {
                __aliasFor: 'Posts',
                id: true,
                comments: {
                    id: true,
                    comment: true
                }
            }
        }
    };
    const graphql_query = jsonToGraphQLQuery(query, { pretty: true });

    Resulting graphql_query

    query {
        allPosts: Posts {
            id
            comments {
                id
                comment
            }
        }
    }

    Query with Enum Values

    import { jsonToGraphQLQuery, EnumType } from 'json-to-graphql-query';
    
    const query = {
        query: {
            Posts: {
                __args: {
                    orderBy: 'post_date',
                    status: new EnumType('PUBLISHED')
                },
                title: true,
                body: true
            }
        }
    };
    const graphql_query = jsonToGraphQLQuery(query, { pretty: true });

    Resulting graphql_query

    query {
        Posts (orderBy: "post_date", status: PUBLISHED) {
            title
            body
        }
    }

    Query with variables

    import { jsonToGraphQLQuery, VariableType } from 'json-to-graphql-query';
    
    const query = {
        query: {
            __variables: {
                variable1: 'String!',
                variableWithDefault: 'String = "default_value"'
            },
            Posts: {
                __args: {
                    arg1: 20,
                    arg2: new VariableType('variable1')
                },
                id: true,
                title: true
            }
        }
    };
    const graphql_query = jsonToGraphQLQuery(query, { pretty: true });

    Resulting graphql_query

    query ($variable1: String!, $variableWithDefault: String = "default_value") {
        Posts (arg1: 20, arg2: $variable1) {
            id
            title
        }
    }

    Query with Directives

    import { jsonToGraphQLQuery } from 'json-to-graphql-query';
    
    const query = {
        query: {
            __directives: {
                client: true
            }
            Posts: {
                id: true,
                title: true,
                post_date: true
            }
        }
    };
    const graphql_query = jsonToGraphQLQuery(query, { pretty: true });

    Resulting graphql_query

    query {
        Posts @client {
            id
            title
            post_date
        }
    }

    Ignoring fields in the query object

    We sometimes want to ignore specific fields in the initial object, for instance __typename in Apollo queries. You can specify these fields using the ignoreFields option:

    import { jsonToGraphQLQuery, VariableType } from 'json-to-graphql-query';
    
    const query = {
        query: {
            Posts: {
                shouldBeIgnored: {
                    variable1: 'a value'
                },
                id: true,
                title: true,
                post_date: true
            }
        }
    };
    const graphql_query = jsonToGraphQLQuery(query, {
        pretty: true,
        ignoreFields: ['shouldBeIgnored']
    });

    Resulting graphql_query

    query {
        Posts {
            id
            title
            post_date
        }
    }

    Query with Inline Fragments

    Full inline fragments

    import { jsonToGraphQLQuery } from 'json-to-graphql-query';
    
    const query = {
        query: {
            Posts: {
                title: true,
                __all_on: [
                    "ConfigurablePost",
                    "PageInfo"
                ]
            }
        }
    };
    const graphql_query = jsonToGraphQLQuery(query, { pretty: true });

    Resulting graphql_query

    query {
        Posts {
            title
            ...ConfigurablePost
            ...PageInfo
        }
    }

    Partial inline fragments

    import { jsonToGraphQLQuery } from 'json-to-graphql-query';
    
    const query = {
        query: {
            Posts: {
                title: true,
                __on: {
                    __typeName: "ConfigurablePost",
                    id: true
                }
            }
        }
    };
    const graphql_query = jsonToGraphQLQuery(query, { pretty: true });

    Resulting graphql_query

    query {
        Posts {
            title
            ... on ConfigurablePost {
                id
            }
        }
    }

    Query with multiple Inline Fragments

    import { jsonToGraphQLQuery } from 'json-to-graphql-query';
    
    const query = {
                query: {
                    Posts: {
                        __on: [
                        {
                            __typeName: "ConfigurablePost",
                            id: true
                        },
                        {
                            __typeName: "UnconfigurablePost",
                            name: true
                        }]
                    }
                }
            };
    const graphql_query = jsonToGraphQLQuery(query, { pretty: true });

    Resulting graphql_query

    query {
        Posts {
            title
            ... on ConfigurablePost {
                id
            }
            ... on UnconfigurablePost {
                name
            }
        }
    }

    Query with name

    import { jsonToGraphQLQuery, VariableType } from 'json-to-graphql-query';
    
    const query = {
        query: {
            __name: 'NewName',
            __variables: {
                variable1: 'String!',
                variableWithDefault: 'String = "default_value"'
            },
            Posts: {
                __args: {
                    arg1: 20,
                    arg2: new VariableType('variable1')
                },
                id: true,
                title: true
            }
        }
    };
    const graphql_query = jsonToGraphQLQuery(query, { pretty: true });

    Resulting graphql_query

    query NewName ($variable1: String!, $variableWithDefault: String = "default_value") {
        Posts (arg1: 20, arg2: $variable1) {
            id
            title
        }
    }

    TO-DO List

    • Probably some other things!...

    Pull requests welcome!

    License

    MIT

    Keywords

    none

    Install

    npm i json-to-graphql-query

    DownloadsWeekly Downloads

    15,701

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    30.5 kB

    Total Files

    19

    Last publish

    Collaborators

    • dupski
    • vkolgi