feat: adds separate components for query and subscription

ghoshnirmalya · Jul 20, 2020 · 252675e · 252675e
1 parent 50c73dd
commit 252675e
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 55 deletions.
diff --git a/packages/frontend/configs/graphql-query.ts b/packages/frontend/configs/graphql-query.ts
diff --git a/packages/frontend/configs/graphql-subscription.ts b/packages/frontend/configs/graphql-subscription.ts
diff --git a/packages/frontend/lib/graphql-subscription-client.ts b/packages/frontend/lib/graphql-subscription-client.ts
diff --git a/packages/frontend/lib/with-graphql-query.tsx b/packages/frontend/lib/with-graphql-query.tsx
@@ -0,0 +1,17 @@
+import { createClient, Provider } from "urql";
+import fetch from "isomorphic-unfetch";
+
+const client = createClient({
+  url: process.env.API_URL || "http://localhost:8080/v1/graphql",
+  fetch,
+  fetchOptions: {
+    headers: { "X-Hasura-Admin-Secret": "secret" },
+  },
+  requestPolicy: "cache-and-network",
+});
+
+const WithGraphQLQuery = ({ children }: any) => (
+  <Provider value={client}>{children}</Provider>
+);
+
+export default WithGraphQLQuery;
diff --git a/packages/frontend/lib/with-graphql-subscription.tsx b/packages/frontend/lib/with-graphql-subscription.tsx
@@ -0,0 +1,32 @@
+import { Client, defaultExchanges, subscriptionExchange, Provider } from "urql";
+import { SubscriptionClient } from "subscriptions-transport-ws";
+import ws from "isomorphic-ws";
+
+const subscriptionClient = new SubscriptionClient(
+  process.env.WS_URL || "ws://localhost:8080/v1/graphql",
+  {
+    reconnect: true,
+    connectionParams: {
+      headers: { "X-Hasura-Admin-Secret": "secret" },
+    },
+  },
+  ws
+);
+
+const client = new Client({
+  url: process.env.WS_URL || "ws://localhost:8080/v1/graphql",
+  exchanges: [
+    ...defaultExchanges,
+    subscriptionExchange({
+      forwardSubscription(operation) {
+        return subscriptionClient.request(operation);
+      },
+    }),
+  ],
+});
+
+const WithGraphQLSubscription = ({ children }: any) => (
+  <Provider value={client}>{children}</Provider>
+);
+
+export default WithGraphQLSubscription;
diff --git a/packages/frontend/pages/query.tsx b/packages/frontend/pages/query.tsx
@@ -1,12 +1,11 @@
 import React from "react";
 import Head from "next/head";
 import Page from "components/pages/query";
-import { withUrqlClient } from "next-urql";
 import { NextPage } from "next";
 import Loader from "components/loader";
 import AccessDeniedIndicator from "components/access-denied-indicator";
 import { useSession } from "next-auth/client";
-import graphqlQueryConfig from "configs/graphql-query";
+import WithGraphQLQuery from "lib/with-graphql-query";
 
 const QueryPage: NextPage = () => {
   const [session, loading] = useSession();
@@ -20,13 +19,13 @@ const QueryPage: NextPage = () => {
   }
 
   return (
-    <>
+    <WithGraphQLQuery>
       <Head>
         <title>People Page</title>
       </Head>
       <Page />
-    </>
+    </WithGraphQLQuery>
   );
 };
 
-export default withUrqlClient(graphqlQueryConfig)(QueryPage);
+export default QueryPage;
diff --git a/packages/frontend/pages/subscription.tsx b/packages/frontend/pages/subscription.tsx
@@ -1,12 +1,11 @@
 import React from "react";
 import Head from "next/head";
 import Page from "components/pages/subscription";
-import { withUrqlClient } from "next-urql";
 import { NextPage } from "next";
 import Loader from "components/loader";
 import AccessDeniedIndicator from "components/access-denied-indicator";
 import { useSession } from "next-auth/client";
-import graphqlSubscriptionConfig from "configs/graphql-subscription";
+import WithGraphQLSubscription from "lib/with-graphql-subscription";
 
 const SubscriptionPage: NextPage = () => {
   const [session, loading] = useSession();
@@ -20,13 +19,13 @@ const SubscriptionPage: NextPage = () => {
   }
 
   return (
-    <>
+    <WithGraphQLSubscription>
       <Head>
         <title>Users Page</title>
       </Head>
       <Page />
-    </>
+    </WithGraphQLSubscription>
   );
 };
 
-export default withUrqlClient(graphqlSubscriptionConfig)(SubscriptionPage);
+export default SubscriptionPage;