GraphQL API is a new way of sending and receiving data. It allows developers to interact with the Salesforce Platform through GraphQL, With GraphQL API, developers can call a single endpoint to get all the data they need in one request.
To use GraphQL API in Lightning web components, Salesforce introduced lightning/uiGraphQLApi Wire Adapters using Lightning Data Service. With this, a single wire adapter can fetch data from multiple objects in a single call.
As this is in beta, it has a few limitations. One of them is that The GraphQL API wire adapter isn’t currently supported Dynamic construction of GraphQL queries at runtime, such as referencing a fragment from another component. However, there is a workaround for this limitation..
We can use the constructor() lifecycle hook to construct a GraphQL query using template literals. As constructor() usually runs before wire, we can dynamically construct GraphQL query there at runtime & then we can pass that query string to wire.
Please check the below code snippet from child LWC component for more information.
To pass data from parent LWC component to child, we usually use @api public property. However, in this case, we cannot access @api property set from parent in GraphQL. To reference another component data in GraphQL, we can create and attach a JSON object to the window in connectedCallback() of parent LWC component and then we can reference that JSON object in the constructor of child LWC component.
Please check the screenshot from parent LWC component below for more information.
“Note: Attaching confidential data to the window is not recommended.”
Check out my GitHub repository Lightning Search utility using the GraphQL Wire Adapter for full code.