Using GraphQL clients

GraphQL client libraries make it easier to work with the Pylon GraphQL API. They handle request formatting, error handling, caching, and more.

Popular GraphQL clients

Apollo Client

Apollo Client is a popular GraphQL client for React, Vue, Angular, and vanilla JavaScript. Installation:

npm install @apollo/client graphql

Setup:

import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
import { setContext } from "@apollo/client/link/context";

const httpLink = createHttpLink({
  uri: "https://pylon.mortgage/graphql",
});

const authLink = setContext((_, { headers }) => {
  const token = getAccessToken(); // Your function to get the token
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    },
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

Using with React:

import { useQuery, useMutation } from "@apollo/client";
import { gql } from "@apollo/client";

const GET_DEAL = gql`
  query GetDeal($id: ID!) {
    deal(id: $id) {
      id
      friendlyId
      borrowers {
        edges {
          node {
            id
            personalInformation {
              firstName
              lastName
            }
          }
        }
      }
    }
  }
`;

function DealComponent({ dealId }) {
  const { loading, error, data } = useQuery(GET_DEAL, {
    variables: { id: dealId },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Deal {data.deal.id}</h1>
      <p>Reference: {data.deal.friendlyId}</p>
    </div>
  );
}

graphql-request

A minimal GraphQL client that works in any JavaScript environment. Installation:

npm install graphql-request graphql

Usage:

import { GraphQLClient } from "graphql-request";

const client = new GraphQLClient("https://pylon.mortgage/graphql", {
  headers: {
    authorization: `Bearer ${accessToken}`,
  },
});

const query = `
  query GetDeal($id: ID!) {
    deal(id: $id) {
      id
      friendlyId
    }
  }
`;

const variables = { id: "123" };

const data = await client.request(query, variables);

Relay

Relay is Facebook’s GraphQL client, optimized for React. Installation:

npm install react-relay relay-runtime

Relay requires a more complex setup with a compiler. See the Relay documentation for details.

Authentication

All clients need to include the authorization header. Here are patterns for different clients:

Apollo Client

const authLink = setContext((_, { headers }) => {
  const token = getAccessToken();
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    },
  };
});

graphql-request

const client = new GraphQLClient("https://pylon.mortgage/graphql", {
  headers: {
    authorization: `Bearer ${accessToken}`,
  },
});

Custom fetch wrapper

async function graphqlRequest(query, variables) {
  const response = await fetch("https://pylon.mortgage/graphql", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${getAccessToken()}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ query, variables }),
  });

  const result = await response.json();

  if (result.errors) {
    throw new Error(result.errors[0].message);
  }

  return result.data;
}

Error handling

All clients should handle GraphQL errors:

try {
  const data = await client.request(query, variables);
  // Use data
} catch (error) {
  if (error.response) {
    // GraphQL errors
    error.response.errors.forEach((err) => {
      console.error("GraphQL Error:", err.message);
    });
  } else {
    // Network or other errors
    console.error("Request Error:", error.message);
  }
}

Caching

Most GraphQL clients provide caching:

Apollo Client

Apollo Client automatically caches queries:

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache({
    typePolicies: {
      Deal: {
        fields: {
          borrowers: {
            merge(existing, incoming) {
              return incoming;
            },
          },
        },
      },
    },
  }),
});

Manual caching

const cache = new Map();

async function cachedRequest(query, variables) {
  const key = JSON.stringify({ query, variables });

  if (cache.has(key)) {
    return cache.get(key);
  }

  const data = await graphqlRequest(query, variables);
  cache.set(key, data);
  return data;
}

TypeScript support

Most clients support TypeScript. Generate types from your schema:

Using GraphQL code generator

npm install -D @graphql-codegen/cli @graphql-codegen/typescript

codegen.yml:

schema: https://pylon.mortgage/graphql
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.ts:
    plugins:
      - typescript
      - typescript-operations

Best practices

Use a client library - Don’t manually construct requests
Handle errors - Always check for GraphQL errors
Use TypeScript - Generate types from your schema
Implement caching - Reduce unnecessary requests
Refresh tokens - Handle token expiration gracefully
Use variables - Never hardcode values in queries

Next steps

Explore the GraphQL API Reference to view the complete schema
Learn about pagination for large datasets
Review error handling patterns

GRAPHQL GUIDES

API REFERENCE

Popular GraphQL clients

Apollo Client

graphql-request

Relay

Authentication

Apollo Client

graphql-request

Custom fetch wrapper

Error handling

Caching

Apollo Client

Manual caching

TypeScript support

Using GraphQL code generator

Best practices

Next steps

​Popular GraphQL clients

​Apollo Client

​graphql-request

​Relay

​Authentication

​Apollo Client

​graphql-request

​Custom fetch wrapper

​Error handling

​Caching

​Apollo Client

​Manual caching

​TypeScript support

​Using GraphQL code generator

​Best practices

​Next steps

Popular GraphQL clients

Apollo Client

graphql-request

Relay

Authentication

Apollo Client

graphql-request

Custom fetch wrapper

Error handling

Caching

Apollo Client

Manual caching

TypeScript support

Using GraphQL code generator

Best practices

Next steps