get-plot-by-id-query.ts

import { graphqlRmrkIndexer } from 'lib/graphql/graphql-client';

export const getPlotByIdQuery = graphqlRmrkIndexer(
  `
    query GetPlotByIdData($plotId: String!) {
      nftById(id: $plotId) {
        ...NftFragment
      }
    }
  `,
  [NftFragment],
);

graphql-client.ts

import { GraphQLClient } from 'graphql-request';
import { NEXT_PUBLIC_GRAPHQL_HTTP_URL_EVM } from 'lib/app/graphql';
import { initGraphQLTada } from 'gql.tada';
import type { introspection } from './rmrk-evm-indexer-env';

export const gqlClient = new GraphQLClient(NEXT_PUBLIC_GRAPHQL_HTTP_URL_EVM ?? '');

export const graphqlRmrkIndexer = initGraphQLTada<{
  introspection: introspection;
}>();

nft-fragment.ts

import { graphqlRmrkIndexer } from 'lib/graphql/graphql-client';

export const NftFragment = graphqlRmrkIndexer(`
  fragment NftFragment on Nft {
    collection {
      id
    }
    id
    isTransferable
    owner
    activeAssetIds
    pending
    priorities
    equipmentUpdatedAt
    metadata
    burned
    lastTransferabilityCheckAt
  }
`);

package.json

"scripts": {
    "get-graphql-schema": "source .env.local && get-graphql-schema $NEXT_PUBLIC_GRAPHQL_HTTP_URL_DEV_EVM > lib/graphql/schema.graphql",
  },

tsconfig.json

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitOverride": true,
    "noImplicitReturns": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "useDefineForClassFields": true,
    "useUnknownInCatchVariables": true,
    "checkJs": false,
    "verbatimModuleSyntax": true,
    "noErrorTruncation": true,
    "module": "esnext",
    "target": "ES2019",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "jsx": "preserve",
    "baseUrl": "./",
    "moduleResolution": "node",
    "allowJs": true,
    "noEmit": true,
    "allowSyntheticDefaultImports": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "plugins": [
      {
        "name": "next"
      },
     {
        "name": "@0no-co/graphqlsp",
        "schemas": [
          {
            "name": "rmrk-evm-indexer",
            "schema": "./lib/graphql/schema.graphql",
            "tadaOutputLocation": "./lib/graphql/rmrk-evm-indexer-env.d.ts",
            "shouldCheckForColocatedFragments": false
          },
          {
            "name": "skybreach-land-indexer",
            "schema": "./lib/graphql-subsquid/schema.graphql",
            "tadaOutputLocation": "./lib/graphql-subsquid/skybreach-land-indexer-env.d.ts",
            "shouldCheckForColocatedFragments": false
          }
        ]
      },
    ],
    "paths": {
      "styled-system/*": [
        "styled-system/*"
      ],
      "lib/*": [
        "lib/*"
      ],
      "components/*": [
        "components/*"
      ],
      "contracts/*": [
        "contracts/*"
      ]
    }
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ]
}

use-get-plot.ts

import { useQueries, useQuery } from '@tanstack/react-query';
import { gqlClient } from 'lib/graphql/graphql-client';
import { getPlotByIdQuery } from 'lib/graphql/queries/get-plot-data';
import { nftFragmentToObject } from 'lib/graphql/nft-fragment-to-object';

export const useGetPlot = ({ plotId, enabled = true }: { plotId: number; enabled?: boolean }) => {
  return useQuery({
    queryKey: ['plots', plotId],
    queryFn: async () => {
      const data = await gqlClient.request(getPlotByIdQuery, {
        plotId: getTokenDatabaseId({ tokenId: plotId }),
      });

      return data?.nftById
        ? addPlotStatsToIndexedPlotData(plotId, nftFragmentToObject(data.nftById))
        : undefined;
    },
    enabled,
  });
};

const {
    data: plotData,
    isLoading,
    isError,
    error,
  } = useGetPlot({ plotId: plotId || 0, enabled: !!plotId });