useVideos.js

import { useEffect } from 'react';
import { config } from '../../utility/config/index';
import { useRecoilState } from 'recoil';
import { videosState } from '../../recoil';

export default function useVideos() {
  const url = config.API_BACKEND;
  const [videos, setVideos] = useRecoilState(videosState);

  async function getVideos() {
    const query = `{
      videos {
        id
        title
        thumbnails {
          default {
            url
          }
        }
        comedianId
      }
    }`;
    const fetchOptions = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json'
      },
      body: JSON.stringify({
        query
      })
    };

    const response = await fetch(`${url}/graphql`, fetchOptions);
    const { data } = await response.json();
    setVideos(data.videos);
  }

  useEffect(() => {
    if (!videos) {
      getVideos();
    }
  }, []);

  return [videos];
}