Dynamically provide values to getRecords wire adapter

Question

I'm working on a record table to display in a flow, I've had a look at the free ones available on the app exchange but none seem to include all of the features I want so I'm trying to build my own.

Where I'm hitting issues is once the flow has found the records to display, I try to use the getRecords wire adapter to get the records and the specified fields defined in the flow builder.

I know this is very similar to other questions regarding the getRecord wire adapter, and I've followed those solutions which work fine for getRecord, but as soon as I change to getRecords I get errors, does anyone know how to use dynamic values with the getRecords wire adapter?

here's my example code that shows the problem

import {LightningElement, api, wire } from 'lwc';
import { getRecords } from 'lightning/uiRecordApi';
import { getRecord } from 'lightning/uiRecordApi';

export default class TestFlowTable extends LightningElement {

    @api fields;        // Id, Name
    @api objectName;    // Account

    fieldsFormatted = ['Id'];

    // works for a single record
    @wire(getRecord, { recordId: '001XXXXXXXXXXXXXXX', fields: '$fieldsFormatted' })
    wiredRecord({ error, data }) {
        if (error) {
            console.log('error',error);
        } else if (data) {
            console.log('data',data);
        }
    }

    // Bad Request - Expected '.' in all qualified names: $fieldsFormatted is invalid
    // only works if I hard code the Ids and fields
    @wire(getRecords, {records: [{recordIds: ['001XXXXXXXXXXXXXXX'], fields: '$fieldsFormatted'}]}) 
    wiredRecords({ error, data }) {
        if (error) {
            console.log('error',error);
        } else if (data) {
            console.log('data',data);
        }
    }

    get trimmedFieldNames() {
        return this.fields.replace(/\s/g, '');
    }

    connectedCallback() {
        // ['Account.Id', 'Account.Name']
        this.fieldsFormatted = (this.trimmedFieldNames || 'Id').split(',').map(field => this.objectName + '.' + field);
    }
}

I've compared the documentation and both say fields takes string[]. I get the same problem if I try to dynamically specify the record Ids too.

Any help would be appriciated

This is what the browser says is being sent for each request

for getRecord: {"actions":[{"id":"66;a","descriptor":"aura://RecordUiController/ACTION$getRecordWithFields","callingDescriptor":"UNKNOWN","params":{"recordId":"001XXXXXXXXXXXXXXX","fields":["Account.Id","Account.Name"]}}]}

for getRecords: {"actions":[{"id":"62;a","descriptor":"aura://RecordUiController/ACTION$getRecordsWithFields","callingDescriptor":"UNKNOWN","params":{"recordIds":["001XXXXXXXXXXXXXXX"],"fields":["$fieldsFormatted"]}}]}

Answer 1

Ok, so after 30 mins of trying a few more things I got there,

I had seen another question where someone suggested moving the records array of objects out on it's own and then you can refer to it dynamically and have it refer to other dynamic valriables.

wireObj= [
        {
            recordIds: this.passedRecords,
            fields: this.fieldsFormatted
        }
];

@wire(getRecords, {records: '$wireObj'}) 

and when I had tried this it didn't work for me but, if I make it a get then it does work, so here's my working code incase anyone else has the same problem.

import { api, LightningElement, track, wire } from 'lwc';
import { getRecords } from 'lightning/uiRecordApi';

export default class TestFlowTable extends LightningElement {

    @api fields;
    @api objectName;
    @api passedRecords;

    fieldsFormatted = ['Id'];

    get wireObj() {
        return [
            {
                recordIds: this.passedRecords,
                fields: this.fieldsFormatted
            }
        ]
    }

    @wire(getRecords, {records: '$wireObj'}) 
    wiredRecords({ error, data }) {
        if (error) {
            console.log('error',error);
        } else if (data) {
            console.log('data',data);
        }
    }

    get trimmedFieldNames() {
        return this.fields.replace(/\s/g, '');
    }

    connectedCallback() {
        this.fieldsFormatted = (this.trimmedFieldNames || 'Id').split(',').map(field => this.objectName + '.' + field);
    }
}