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

Name

Type

Description

{
    // Response
}

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

Your staging GraphQL Endpoint for all Niftory Requests.

Targets blockchain testnet.

Headers

{
    // 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.

PreviousGetting Authenticated NextAPI Usage

Last updated 1 year ago

Name

Type

Description

Name

Type

Description

/** * 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}` : "", }, }); }

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>; };