Error Handling

{
  "errors": [
    {
      "message": "Human-readable error message",
      "extensions": {
        "code": "ERROR_CODE",
        "additionalInfo": "..."
      },
      "path": ["queryName", "fieldName"]
    }
  ],
  "data": {
    "queryName": null
  }
}

{
  "data": {
    "content": null
  }
}

{
  "errors": [
    {
      "message": "Unauthorized",
      "extensions": {
        "code": "UNAUTHORIZED"
      },
      "path": ["contents"]
    }
  ],
  "data": null
}

{
  "errors": [
    {
      "message": "Preview link not found",
      "extensions": {
        "code": "PREVIEW_NOT_FOUND"
      },
      "path": ["preview"]
    }
  ],
  "data": { "preview": null }
}

{
  "errors": [
    {
      "message": "Component not found",
      "extensions": {
        "code": "COMPONENT_NOT_FOUND"
      },
      "path": ["preview"]
    }
  ],
  "data": { "preview": null }
}

{
  "errors": [
    {
      "message": "Variable \"$id\" of required type \"ID!\" was not provided.",
      "extensions": {
        "code": "BAD_USER_INPUT"
      },
      "locations": [{ "line": 1, "column": 7 }]
    }
  ]
}

async function fetchContent(id) {
  const response = await fetch('https://api.metabind.ai/graphql', {
    method: 'POST',
    headers: {
      'x-api-key': API_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      query: GET_CONTENT_QUERY,
      variables: { id }
    })
  });

  const { data, errors } = await response.json();

  if (errors) {
    for (const error of errors) {
      switch (error.extensions?.code) {
        case 'UNAUTHORIZED':
          throw new Error('Invalid API key');
        default:
          console.error('GraphQL error:', error.message);
      }
    }
  }

  // content returns null, not an error, when the ID doesn't exist
  if (data?.content === null) {
    console.warn(`Content ${id} not found`);
    return null;
  }

  return data?.content;
}

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { onError } from '@apollo/client/link/error';

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    for (const { message, extensions, path } of graphQLErrors) {
      switch (extensions?.code) {
        case 'UNAUTHORIZED':
          // Redirect to login or refresh API key
          handleUnauthorized();
          break;
        case 'NOT_FOUND':
          console.warn(`Resource not found at ${path?.join('.')}`);
          break;
        case 'PREVIEW_NOT_FOUND':
          // Preview link no longer exists
          handleExpiredPreview();
          break;
        default:
          console.error(`GraphQL error: ${message}`);
      }
    }
  }

  if (networkError) {
    console.error(`Network error: ${networkError}`);
  }
});

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

function useContent(id) {
  const { data, loading, error } = useQuery(GET_CONTENT, {
    variables: { id },
    errorPolicy: 'all'  // Return partial data with errors
  });

  if (error) {
    throw error;  // Re-throw unexpected errors
  }

  // content returns null, not an error, when the ID doesn't exist
  if (data?.content === null) {
    return { content: null, loading: false, notFound: true };
  }

  return { content: data?.content, loading, notFound: false };
}

import { createClient } from 'graphql-ws';

const client = createClient({
  url: 'wss://ws-api.metabind.ai?protocol=graphql-transport-ws',
  connectionParams: {
    apiKey: API_KEY
  },
  on: {
    error: (error) => {
      console.error('WebSocket error:', error);
    },
    closed: () => {
      console.log('WebSocket closed');
    }
  },
  retryAttempts: 5,
  shouldRetry: () => true
});

client.subscribe({
  query: CONTENT_UPDATED,
  variables: { id: 'cont123' }
}, {
  next: (data) => {
    if (data.errors) {
      for (const error of data.errors) {
        console.error('Subscription error:', error.message);
      }
      return;
    }
    handleUpdate(data.data.contentUpdated);
  },
  error: (err) => {
    console.error('Subscription error:', err);
  },
  complete: () => {
    console.log('Subscription complete');
  }
});