Query Results conditionally renders Apollo useQuery hooks states: loading, error or its children when data is ready.

query-result.js

import React from 'react';

// usage example: 

/*
<QueryResult error={error} loading={loading} data={data}>
    {data?.tracksForHome?.map((track) => <TrackCard key={track.id} track={track} />))}
</QueryResult>
*/

/**
 * Query Results conditionally renders Apollo useQuery hooks states:
 * loading, error or its children when data is ready
 */
const QueryResult = ({ loading, error, data, children }) => {
  if (error) {
    // customize your error here
    return <p>ERROR: {error.message}</p>;
  }
  if (loading) {
    return (
      // customize your loading here
      <div>
        <span>Loading...</span>
      </div>
    );
  }
  if (!data) {
    // customize when you dont have data to show but the query work fine
    return <p>Nothing to show...</p>;
  }
  if (data) {
    // return the children, wrap this component around you query
    /*
    <QueryResult error={error} loading={loading} data={data}>
      {data?.tracksForHome?.map((track) => <TrackCard key={track.id} track={track} />))}
     </QueryResult>
    */
    return children;
  }
};

export default QueryResult;