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

​
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
      status
      borrowers {
        id
        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>Status: {data.deal.status}</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
      status
    }
  }
`;

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

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

​
Next steps