Angular Implementation with SSR

[jdgamble555]

Here is an Angular implementation with SSR for anyone that finds this. It is actually pretty simple...

urql.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  cacheExchange,
  Client,
  createClient,
  dedupExchange,
  fetchExchange,
  gql,
  ssrExchange,
  subscriptionExchange,
} from '@urql/core';
import { SubscriptionClient } from "subscriptions-transport-ws";
import 'isomorphic-unfetch';
import * as ws from 'ws';

const uri = "YOUR ENDPOINT";

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class UrqlModule {

  client!: Client;

  // you could list your queries here...
  QUERY1 = gql`some query here`;

  constructor() {

    // obviously all this changes depending on your implementation and exchanges...
    // you could also use isPlatformBrowser here
    const isServerSide = typeof window === 'undefined';

    const ssr = ssrExchange({
      isClient: !isServerSide,
      initialState: !isServerSide ? (window as any).__URQL_DATA__ : undefined,
    });

    const subscriptionClient = new SubscriptionClient(`wss://${uri}`, {
      reconnect: true,
      lazy: true,
    }, ws);
    this.client = createClient({
      url: `https://${uri}`,
      exchanges: [
        dedupExchange,
        cacheExchange,
        ssr,
        fetchExchange,
        subscriptionExchange({
          forwardSubscription(operation) {
            return subscriptionClient.request(operation);
          },
        }),
      ]
    });
  }
}

If you don't use angular universal, you won't need all the ssr stuff.

Simply import the module as usual to your app module and the components that use it. Call the client property form this module in your component depending on your usage, and voila!