Create graphql loader for lwc

[AllanOricil]

Is your feature request related to a problem? Please describe.

Writing graphql queries in components is too verbose. It could also lead to code duplication if multiple components need the same query with different sets of variables.

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_graphql

Describe the solution you'd like

.graphql files could be bundled with lightning components during deployments.

force-app
└── main
    └── default 
        └── lwc
            └── myComponent
                ├── myComponent.js 
                ├── myComponent.xml 
                └── myQuery.graphql

import { lightningComponent, wire } from 'lwc'
import { graphql } from 'lightning/uiGraphQLApi'
import myQuery from "myQuery.graphql"  // it would be necessary to create a gql loader like if we were using webpack

export default class MyComponent extends lightningComponent {

//this could also be a getter or a normal function
variables = {
   "KEY": "VALUE",
   ...
}

@wire(graphql, { 
    query: myQuery, 
    variables: $variables
})
someProperty
...

}

With .graphql files developers can:

• test and tune graphql queries before coupling it with the components code using any of the vscode extensions available for this purpose
• import .graphql when writting tests
• reuse .graphql in multiple components
• .graphql files are easier to work because they can be tokenized (which enables syntax highlight and autocompletion) in code editors
• it is easier to write and compose queries with fragments using .graphql files

It must also let developers to import .graphql from other bundles

import myQuery from "<namespace>/otherComponentBundle/myQuery.graphql"

Webpack graphql loader

https://www.npmjs.com/package/@graphql-tools/webpack-loader

https://www.npmjs.com/package/webpack-graphql-loader

https://medium.com/modus-create-front-end-development/load-your-graphql-documents-with-webpack-apollo-c1e166404cba

After releasing this loader I would also deprecate this inline graphql feature to encourage people to use .graphql files

Describe alternatives you've considered I could write my own loader

Or

As an alternative for modularization people can do the following

import  { gql } from "lightning/uiGraphQLApi"

export const myQuery = gql`...`;

then import myQuery in their components and pass its ref to wire. It is just really annoying having to import the gql module multiple times, specially when organizing queries in multiple modules, or the need to wrap the query in an object by hand.

Additional context N/A

[AllanOricil]

This loader would be useful for LWR projects as well

[AllanOricil]

The local dev server must also support this

[AllanOricil]

Look how horrible this looks 😅

[jmsjtu]

Thanks for providing feedback @AllanOricil, this is part of Lightning Data Services.

I've tagged a few members of the team to take a look.

@scarrawaySF @jodarove