bartcis

import React from 'react';
import './App.scss';

const articles = [
  { title: 'Art one', desc: 'Lorem Ipsum One', url: '/artOne' },
  { title: 'Art two', desc: 'Lorem Ipsum Two', url: '/artTwo' },
];

const Header = () => (
  <nav className="App_header">

bartcis

useEffect(() => {
    const abortController = new AbortController();
    const {signal} = abortController;

    const apiCall = async path => {
      try {
        const request = await fetch(path, {
          signal: signal,
          method: 'GET',
        });

bartcis

const fetchOnClick = async () => {
  try {
    abortFuncs.current.unshift(abortArticleRequest);

    const newArticleRequest = await articleRequest;
    const newArticle = await newArticleRequest.json();

    setState([...state, newArticle]);
    setArticleId(articleId +1);
  } catch(e) {

bartcis

const [articleId, setArticleId] = useState(2);
const [articleRequest, abortArticleRequest] = useGetSingleArticle({articleId: articleId});
const abortFuncs = useRef([]);

bartcis

import {compile} from 'path-to-regexp';
import {GET_ARTICLE_PATH} from './articles-routes';

export const useGetSingleArticle = ({ articleId, abortController = new AbortController()}) => {
  const baseUrl = 'https://jsonplaceholder.typicode.com';
  const path = baseUrl + compile(GET_ARTICLE_PATH)({articleId});
  const { signal, abort } = abortController || {};
  const articleRequest = fetch(path, {
    signal: signal,
    method: 'GET',

bartcis

export const Articles = () => {
  const [state, setState] = useState([]);

  useEffect(() => {
    const abortController = new AbortController();
    const {signal} = abortController;

    const apiCall = async path => {
      try {
        const request = await fetch(path, {

bartcis

const [showLoading, setShowLoading] = useState(false)

 useEffect(
    () => {
      let timer1 = setTimeout(() => setShowLoading(true), 1000)

      // this will clear Timeout when component unmont like in willComponentUnmount
      return () => {
        clearTimeout(timer1)
      }

bartcis

import React from 'react';
import { useQuery } from 'graphql-hooks';

const countryQuery = ` 
  query($id: Int!) {
    country(id: $id) {
      name
      population
    }
  }

bartcis

import React from 'react';

import { Query } from 'react-apollo'
import gql from 'graphql-tag'

const countryQuery = gql` 
  query($id: Int!) {
    country(id: $id) {
      name
      population

bartcis

// Context for React Apollo
const httpLinkReactApollo = createHttpLink({
  uri: 'http://localhost:4000'
});
const clientReactApollo = new ApolloClient({
  link: httpLinkReactApollo,
  cache: new InMemoryCache()
});

// Context for GraphQL Hooks