custom-hooks

custom-hooks.js

// Core
import React from 'react';

// Hooks
import { useQueryAllAvailablePets } from './hooks/useQueryAllAvailablePets';

export const SpecialList = () => {
  //pets: data && data.allAvailablePets from custom hooks
  const { getAllAvailablePets, loading, error, pets } = useQueryAllAvailablePets();

  const loaderJSX = loading && (
    <p>Loading...</p>
  );

  const errorJSX = error && (
    <p>
      We have a problem: {error.message}
    </p>
  );

  const petsJSX = pets && pets.map(({id, name, weight}) => (
    <p key={id}>
      <span>Name: {name}</span>
      <span>Weight: {weight}</span>
    </p>
  ));

  return (
    <>
      <button onClick={getAllAvailablePets}>Download</button>
      {loaderJSX}
      {errorJSX}
      {petsJSX}
    </>
  )
};

//custom hooks
// Core
import { useLazyQuery } from '@apollo/react-hooks';
import { loader } from 'graphql.macro';

// Queries
const queryAllAvailablePets = loader('./gql/queryAllAvailablePets.graphql');

export const useQueryAllAvailablePets = () => {
  const [getAllAvailablePets, { loading, error, data }] = useLazyQuery(queryAllAvailablePets);

  return { getAllAvailablePets, loading, error, pets: data && data.allAvailablePets }
};