update NETWORK_SUBGRAPH_MAINNET & add api-key to CLI

Author: DenisCarriere

packages/cli/src/commands/publish.ts

@@ -46,6 +46,10 @@ export default class PublishCommand extends Command {
       required: false,
       default: 'https://cli.thegraph.com/publish',
     }),
+    'api-key': Flags.string({
+      summary: 'The API key to use for the Subgraph queries.',
+      required: false,
+    }),
   };
 
   /**
@@ -56,11 +60,13 @@ export default class PublishCommand extends Command {
     webapp,
     subgraphId,
     protocolNetwork,
+    apiKey,
   }: {
     ipfsHash: string;
     webapp: string;
     subgraphId: string | undefined;
     protocolNetwork: string | undefined;
+    apiKey: string | undefined;
   }) {
     const answer = await ux.prompt(
       `Press ${chalk.green(
@@ -84,6 +90,9 @@ export default class PublishCommand extends Command {
     if (protocolNetwork) {
       searchParams.set('network', protocolNetwork);
     }
+    if (apiKey) {
+      searchParams.set('apiKey', apiKey);
+    }
 
     url.search = searchParams.toString();
 
@@ -105,11 +114,12 @@ export default class PublishCommand extends Command {
         ipfs,
         'subgraph-id': subgraphId,
         'protocol-network': protocolNetwork,
+        'api-key': apiKey,
       },
     } = await this.parse(PublishCommand);
 
     if (ipfsHash) {
-      await this.publishWithBrowser({ ipfsHash, webapp: webUiUrl, subgraphId, protocolNetwork });
+      await this.publishWithBrowser({ ipfsHash, webapp: webUiUrl, subgraphId, protocolNetwork, apiKey });
       return;
     }
 
@@ -146,6 +156,7 @@ export default class PublishCommand extends Command {
       webapp: webUiUrl,
       subgraphId,
       protocolNetwork,
+      apiKey,
     });
     return;
   }

packages/cli/src/validation/schema.ts

@@ -227,7 +227,7 @@ const gatherLocalTypes = (defs: readonly graphql.DefinitionNode[]) => {
     )
     .map(
       def =>
-        // @ts-expect-error TODO: name field does not exist on definition, really?
+        // TODO: name field does not exist on definition, really?
         def.name.value,
     );
 };

website/src/lib/graphql.ts

@@ -1,25 +1,15 @@
-import { print } from 'graphql';
-import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+export const NETWORK_SUBGRAPH_MAINNET = 'https://gateway.thegraph.com/api/{api-key}/subgraphs/id/DZz4kDTdmzWLWsV373w2bSmoar3umKKH9y82SUKr5qmp';
+export const NETWORK_SUBGRAPH_SEPOLIA = 'https://gateway.thegraph.com/api/{api-key}/subgraphs/id/3xQHhMudr1oh69ut36G2mbzpYmYxwqCeU6wwqyCDCnqV';
 
-export const NETWORK_SUBGRAPH_MAINNET =
-  'https://api.thegraph.com/subgraphs/name/graphprotocol/graph-network-arbitrum';
-export const NETWORK_SUBGRAPH_SEPOLIA =
-  'https://api.thegraph.com/subgraphs/name/graphprotocol/graph-network-arbitrum-sepolia';
-
-export async function networkSubgraphExecute<Result = unknown, Variables = unknown>(
-  query: TypedDocumentNode<Result, Variables>,
-  variables: Variables,
-  {
-    endpoint,
-  }: {
-    endpoint: string;
-  },
-): Promise<Result> {
-  const response = await fetch(endpoint, {
+export async function networkSubgraphExecute(
+  query: string,
+  endpoint: string,
+  apiKey: string,
+) {
+  const response = await fetch(endpoint.replace("{api-key}", apiKey), {
     method: 'POST',
     body: JSON.stringify({
-      query: print(query),
-      variables,
+      query,
     }),
   });
   return (await response.json()).data;

website/src/routes/publish.lazy.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { ConnectKitButton, useModal } from 'connectkit';
-import { graphql } from 'gql.tada';
 import { useForm } from 'react-hook-form';
 import semver from 'semver';
 import { Address } from 'viem';
@@ -129,9 +128,9 @@ const Manifest = z.object({
   repository: z.string().describe('An optional link to where the subgraph lives.').optional(),
 });
 
-const GetSubgraphInfo = graphql(/* GraphQL */ `
-  query GetSubgraphInfo($subgraphId: ID!) {
-    subgraph(id: $subgraphId) {
+const GetSubgraphInfo = (subgraphId: string) => `
+  {
+    subgraph(id: "${subgraphId}") {
       id
       owner {
         id
@@ -155,7 +154,7 @@ const GetSubgraphInfo = graphql(/* GraphQL */ `
       }
     }
   }
-`);
+`;
 
 function getEtherscanUrl({ chainId, hash }: { chainId: number; hash: string }) {
   switch (chainId) {
@@ -172,10 +171,12 @@ function DeploySubgraph({
   deploymentId,
   subgraphId,
   network,
+  apiKey
 }: {
   deploymentId: string;
   subgraphId: string | undefined;
   network: (typeof CHAINS)[number] | undefined;
+  apiKey: string | undefined;
 }) {
   const { writeContractAsync, isPending, error: contractError } = useWriteContract({});
   const { setOpen } = useModal();
@@ -214,20 +215,31 @@ function DeploySubgraph({
   const chain = form.watch('chain');
 
   const { data: subgraphInfo } = useQuery({
-    queryKey: ['subgraph-info', subgraphId, chain, chainId],
+    queryKey: ['subgraph-info', subgraphId, chain, chainId, apiKey],
     queryFn: async () => {
-      if (!subgraphId) return;
+      if (!subgraphId) {
+        toast({
+          description: 'Subgraph ID is missing. Please add it to the URL params and try again.',
+          variant: 'destructive',
+        });
+        return;
+      }
+      if (!apiKey) {
+        toast({
+          description: "apiKey is missing in URL params. Please add it to the URL params and try again.",
+          variant: 'destructive',
+        });
+        return;
+      }
 
       const subgraphEndpoint = chain ? getChainInfo(chain)?.subgraph : null;
 
       if (!subgraphEndpoint) return;
 
       const data = await networkSubgraphExecute(
-        GetSubgraphInfo,
-        { subgraphId },
-        {
-          endpoint: subgraphEndpoint,
-        },
+        GetSubgraphInfo(subgraphId),
+        subgraphEndpoint,
+        apiKey
       );
 
       const metadata = data.subgraph?.metadata;
@@ -264,7 +276,7 @@ function DeploySubgraph({
     const version = form.watch('versionLabel');
 
     const versionInfo = subgraphInfo.subgraph?.versions.find(
-      ({ metadata }) => metadata?.label === version,
+      ({ metadata }: { metadata: { label: string } }) => metadata?.label === version,
     );
 
     if (!versionInfo) return false;
@@ -280,7 +292,7 @@ function DeploySubgraph({
 
     const version = form.watch('versionLabel');
 
-    return !subgraphInfo.subgraph?.versions.some(({ metadata }) => metadata?.label === version);
+    return !subgraphInfo.subgraph?.versions.some(({ metadata }: { metadata: { label: string } }) => metadata?.label === version);
   }
 
   function isOwner() {
@@ -375,7 +387,7 @@ function DeploySubgraph({
         if (e?.name === 'ContractFunctionExecutionError') {
           if (e.cause.name === 'ContractFunctionRevertedError') {
             toast({
-              description: e.cause.reason,
+              description: e.cause.message,
               variant: 'destructive',
             });
             return;
@@ -565,7 +577,7 @@ function DeploySubgraph({
 }
 
 function Page() {
-  const { id, subgraphId, network } = Route.useSearch();
+  const { id, subgraphId, network, apiKey } = Route.useSearch();
 
   const protocolNetwork = network
     ? // @ts-expect-error we want to compare if it is a string or not
@@ -581,7 +593,7 @@ function Page() {
         <ConnectKitButton />
       </nav>
       {id ? (
-        <DeploySubgraph deploymentId={id} subgraphId={subgraphId} network={protocolNetwork} />
+        <DeploySubgraph deploymentId={id} subgraphId={subgraphId} network={protocolNetwork} apiKey={apiKey} />
       ) : (
         <div className="flex justify-center items-center min-h-screen -mt-16">
           Unable to find the Deployment ID. Go back to CLI

website/src/routes/publish.tsx

@@ -6,6 +6,7 @@ export const Route = createFileRoute('/publish')({
     subgraphId: z.string().optional(),
     // Transforming string to enum here doesn't actually work
     network: z.string().optional(),
-    id: z.string(),
+    id: z.string().optional(),
+    apiKey: z.string().optional(),
   }),
 });