Example with async api call

[ejangi]

Hi Team,

I'm currently trying to figure out how to @wire a component property to a Google Firestore call. Obviously, this is an async call. So, based on the example here (which is essentially a synchronous call to the static contacts JSON) I'm not sure how to make this work.

Are you able to add an example with that includes something like this so I can follow along?

Thanks, James.

[pozil]

Hi James,

You have two options for implementing async API calls.

The simplest is to directly use the Fetch API in you component like this: https://github.com/trailheadapps/lwc-recipes-oss/blob/master/src/modules/recipe/miscRestApiCall/miscRestApiCall.js

Otherwise, you can create a custom wire adapter like this: https://github.com/trailheadapps/lwc-recipes-oss/blob/master/src/modules/data/wireGetContactListProvider/wireGetContactListProvider.js

As you've noticed we're just returning data from a JSON file in this example. However, you can change that and call the Fetch API then, fire the ValueChangedEvent when the Fetch promise resolves.

Here's a more advanced example of a custom wire adapter taken for the LWC repository: https://github.com/salesforce/lwc/tree/master/packages/%40lwc/wire-service#example-wire-adapter-implementation

[muenzpraeger]

One word of warning: there will be a reform of the wire adapter (see the RfC here) at some point not too far out.

[ejangi]

Thanks @pozil and @muenzpraeger, that last example is the one I'm currently following, but the connect event doesn't seem to fire in my case. I ended up posting the full attempt on stackoverflow. You can take a look at my source if it's any help.

[muenzpraeger]

@pmdartus ^^