How to use the urql.createClient function in urql

export default function initUrqlClient(initialState) {
  // Create a new client for every server-side rendered request to reset its state
  // for each rendered page
  // Reuse the client on the client-side however
  const isServer = typeof window === 'undefined';
  if (isServer || !urqlClient) {
    ssrCache = ssrExchange({ initialState });

    urqlClient = createClient({
      url: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn',
      // Active suspense mode on the server-side
      suspense: isServer,
      exchanges: [dedupExchange, cacheExchange, ssrCache, fetchExchange],
    });
  }

  // Return both the cache and the client
  return [urqlClient, ssrCache];
}

module.exports = function initUrqlClient(initialState, { url }) {
  // Create a new client for every server-side rendered request to reset its state
  // for each rendered page
  // Reuse the client on the client-side however
  const isServer = typeof window === 'undefined';
  if (isServer || !urqlClient) {
    ssrCache = ssrExchange({ initialState });

    urqlClient = createClient({
      url,
      // Active suspense mode on the server-side
      suspense: isServer,
      exchanges: [dedupExchange, cacheExchange, ssrCache, fetchExchange]
    });
  }

  // Return both the cache and the client
  return [urqlClient, ssrCache];
};

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider, createClient } from 'urql';

const client = createClient({
  url: 'http://127.0.0.1:8000/graphql/',
});
ReactDOM.render(
  
    
    
    , document.getElementById('app'));

import React from "react";
import DocumentsProvider from "./contexts/documents-provider";
import { Provider, createClient } from "urql";
import ReactDOM from "react-dom";
import AppView from "./views/app-view";
import "./assets/font/inter.css";
import "focus-visible";

const client = createClient({
  url: "/graphql",
  fetchOptions: () => {
    const authorizationToken = localStorage.getItem("authorization_token");
    return {
      headers: {
        ...(authorizationToken && {
          Authorization: `Bearer ${authorizationToken}`,
        }),
      },
    };
  },
});

const PublicationsApp: React.FC = () => (

cacheExchange,
  createClient,
  debugExchange,
  fetchExchange,
  Provider,
  subscriptionExchange,
} from 'urql';
import './index.css';
import { Messages } from './Messages';

const subscriptionClient = new SubscriptionClient(
  'ws://localhost:4001/graphql',
  {}
);

const client = createClient({
  url: 'http://localhost:4000/graphql',
  exchanges: [
    debugExchange,
    cacheExchange,
    fetchExchange,
    subscriptionExchange({
      forwardSubscription: operation => subscriptionClient.request(operation),
    }),
  ],
});

export const App: FC = () => (
  
    <main>
      <h1>New messages</h1>
      </main>

import React, { FC } from 'react';
import * as ReactDOM from 'react-dom';
import { createClient, Provider, defaultExchanges } from 'urql';
import { devtoolsExchange } from '@urql/devtools';
import { Home } from './Home';
import './index.css';

const client = createClient({
  url: 'http://localhost:3001/graphql',
  exchanges: [devtoolsExchange, ...defaultExchanges],
});

export const App: FC = () => (
  
    <main>
      <h1>Todos</h1>
      
    </main>
  
);

App.displayName = 'App';

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