Calling external API in PCF

[sthurangi]

Hello All,

I am trying to consume/fetch the data from external web api into PCF component. I am getting below error

"https.get is not a function". 

 private callHttps(url: string😞 Promise<any> {

        const https = require('https');

        return new Promise<string>(resolve => {

            https.get(url, (res: any) => {

                res.setEncoding("utf8");

                let body = "";

                res.on("data", (data: any) => {

                    body += data;

                });

                res.on("end", () => {

                    let respBody: any = JSON.parse(body);

                    resolve(respBody);

                });

            });

        });

    }

[a33ik · Accepted solution]

Hello,

I have never used this https package. Just a question - why regular fetch is not an option?

[sthurangi]

Yes, it is an option tried using fetch even though it is showing "https.fetch" is not a function.

[sthurangi]

Yes, it is an option tried using fetch even though it is showing "https.fetch" is not a function.

[DianaBirkelbach · Accepted solution]

Hi @sthurangi , 

I think @a33ik was recommending "fetch()", not http.fetch.

Here are some docs: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

[sthurangi]

Thanks @a33ik and @DianaBirkelbach 

It's working

[iwaldman]

I couldn't help myself 😀

import * as React from 'react';
import { Text } from '@fluentui/react/lib/Text';
import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';

const URL = 'https://pokeapi.co/api/v2/pokemon';

interface Pokemons {
  count: number;
  next: string;
  previous?: any;
  results: {
    name: string;
    url: string;
  }[];
}

// Fetch a few Pokemons
const getPokemons = async (): Promise<Pokemons> => {
  const response = await fetch(`${URL}?limit=20`);
  return await response.json();
};

export const PokemonList: React.FunctionComponent = () => {
  const [loading, setLoading] = React.useState(true);
  const [pokemons, setPokemons] = React.useState<Pokemons | null>();

  // Fetch a few Pokemons
  React.useEffect(() => {
    getPokemons().then((data) => {
      setPokemons(data);
      setLoading(false);
    });
  }, []);

  if (loading) {
    return <Spinner size={SpinnerSize.large} label="Loading Pokemons..." />;
  }

  return (
    <>
      {pokemons?.results.map((pokemon) => (
        <Text key={pokemon.name} variant="xLarge" style={{ color: 'purple' }} block>
          {pokemon.name}
        </Text>
      ))}
    </>
  );
};

[sthurangi]

Thanks @iwaldman 

Got the response in the form of an array, would like to display the response to details list in pcf, how can I achieve this. without using out-of-box grid/datasets

Any help will be appreciated

[iwaldman]

You could try using the Fluent UI DetailsList react control.

See https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/basic for more information.