How to use the urql.Client function in urql

import React from 'react'
import ReactDOM from 'react-dom'

import { Provider, Client} from 'urql'

import App from './components/App'
import './index.css'

import registerServiceWorker from './registerServiceWorker'

// Replace this with your project's endpoint
const GRAPHCMS_API = 'https://api.graphcms.com/simple/v1/starterBlog'

const client = new Client({
  url: 'https://api.graphcms.com/simple/v1/starterBlog'
})

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
)
registerServiceWorker()

import { Client } from 'urql'

// Local
import config from '../../../config'
import { electronStoreCache } from './cache'
import { getHeaders } from '../api'

export const client = new Client({
  url: config.graphqlEndpoint,
  fetchOptions: () => ({ headers: getHeaders(`application/json`) }),
  cache: electronStoreCache(),
})

import * as React from 'react';
import { Routes } from '../../routing';
import { Provider } from '../../store';
import { Provider as URQLProvider, Client } from 'urql';
import { NavBar, Player } from '../../components';
import { ModalsContainer as Modals } from '../';
import { setTheme } from '../../store';
import { updateThemeForStyle } from '../../helpers';
import './style.css';

const client = new Client({
  fetchOptions: { credentials: 'same-origin' },
  url: `${window.location.origin}/graphql`,
});

export function AppContainer() {
  React.useEffect(() => {
    if (window && window.localStorage) {
      const theme = window.localStorage.getItem('wavves-theme');

      if (!!theme) {
        updateThemeForStyle(theme);
        setTheme(theme);
      }
    }
  });

reconnect: true,
    lazy: config.lazy || false,
    inactivityTimeout: 0,
    connectionCallback(err) {
      const { onConnected, onDisconnected } = config;
      const errors = err && (Array.isArray(err) ? err : [err]);

      if (errors && errors.length > 0) {
        typeof onDisconnected === 'function' && onDisconnected(errors);
      } else {
        typeof onConnected === 'function' && onConnected();
      }
    },
  });
  const forwardSubscription = operation => subscriptionClient.request(operation);
  return new Client({
    url,
    fetchOptions: config.default || {},
    exchanges: [
      ...defaultExchanges,
      subscriptionExchange({
        forwardSubscription,
      }),
    ],
  });
}

import React, { Component } from "react";
import { Provider, Client, Connect, query } from "urql";
import {
  VictoryChart,
  VictoryLine,
  VictoryAxis,
  VictoryZoomContainer,
  VictoryBrushContainer,
  VictoryLegend
} from "victory";

import "./App.css";

const client = new Client({
  url: process.env.REACT_APP_APPSYNC_URL,
  fetchOptions: {
    headers: {
      "X-Api-Key": process.env.REACT_APP_APPSYNC_API_KEY
    }
  }
});

const GetDatapointsQuery = `
query {
  getDatapoints {
    createdAt
    temperature
    pressure
    humidity
  }

componentWillMount() {
    this.urqlClient = new Client({
      url: config.graphqlEndpoint,
      fetchOptions: () => ({
        headers: {
          'Content-type': 'application/json',
          Authorization: `Bearer ${this.props.token}`,
        },
      }),
    })
  }