GraphQL Client Setup

The sample uses graphql-request to interact with Niftory's GraphQL endpoints.

For production use-cases, we recommend using urql or Apollo clients.

Revisit our rationale for starting with GraphQL.

POST https://graphql.api.niftory.com

Your production GraphQL Endpoint for all Niftory Requests.

\

Targets blockchain prod.

Headers

NameTypeDescription

X-Niftory-API-Key**

String

Your Niftory API Key

Authorization

String

Bearer token containing the user's JWT. See

Authenticating the User

.

{
    // Response
}

POST https://graphql.api.staging.niftory.com

Your staging GraphQL Endpoint for all Niftory Requests.

\

Targets blockchain testnet.

Headers

NameTypeDescription

X-Niftory-API-Key**

String

Your Niftory API Key

Authorization

String

Bearer token containing the user's JWT. See

Authenticating the User

.

{
    // Response
}
GraphQL Client with graphql-request
/**
 * Creates a graphQL client for use in the browser, using the user's auth token for authentication
 * @param url The URL of the GraphQL API
 * @param apiKey The API key
 * @param session The user session
 * @returns The graphQL client
 */
export function getFrontendGraphQLClient(
  url: string,
  apiKey: string,
  session: Session | null
) {
  return new GraphQLClient(url, {
    headers: {
      "X-Niftory-API-Key": apiKey,
      Authorization: session?.authToken ? `Bearer ${session.authToken}` : "",
    },
  });
}
GraphQL Client with URQL
export function getGraphQLClient(
  url: string,
  apiKey: string,
  session: Session | null
) {
  return createClient({
    url: url,
    fetchOptions: {
      headers: {
        "X-Niftory-API-Key": apiKey,
        Authorization: session?.authToken ? `Bearer ${session.authToken}` : "",
      },
    },
  });
}

export const GraphQLClientProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const { data: session } = useSession();

  const graphqlClient = getGraphQLClient(
    process.env.NEXT_PUBLIC_API_PATH as string,
    process.env.NEXT_PUBLIC_API_KEY as string,
    session
  );

  return <Provider value={graphqlClient}>{children}</Provider>;
};

No matter what client library you use, the 3 things you need to make requests to the Niftory API are:

You can use the Niftory API in staging mode, which doesn't affect your production data, and executes blockchain transactions on testnet. The API endpoint you use -- api.staging.niftory.com vs. api.niftory.com determines the mode.

We strongly recommend you use the API's staging endpoint until you are ready to deploy your app to production.

Last updated