TypeScript examples

fetch

const API_URL = 'https://uthana.com/graphql';
const API_KEY = 'YOUR_API_KEY';

async function getMotion(motionId: string) {
  // Encode API key for Basic auth
  const authString = btoa(`${API_KEY}:`);

  const res = await fetch(API_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Basic ${authString}`,
    },
    body: JSON.stringify({
      query: `
        query GetMotion($id: String!) {
          motion(id: $id) {
            id
            name
            created
          }
        }
      `,
      variables: { id: motionId },
    }),
  });

  const json = await res.json();
  return json.data.motion;
}

// Usage
getMotion('m3G3XSJrjEJH').then(console.log);

React Query + graphql-request

import { GraphQLClient, gql } from 'graphql-request';
import { useQuery } from '@tanstack/react-query';

const API_URL = 'https://uthana.com/graphql';
const API_KEY = 'YOUR_API_KEY';

// Encode API key for Basic auth
const authString = btoa(`${API_KEY}:`);

const client = new GraphQLClient(API_URL, {
  headers: {
    Authorization: `Basic ${authString}`,
  },
});

const GetMotion = gql`
  query GetMotion($id: String!) {
    motion(id: $id) {
      id
      name
      created
    }
  }
`;

export function useMotion(motionId: string) {
  return useQuery({
    queryKey: ['motion', motionId],
    queryFn: async () => {
      const data = await client.request(GetMotion, { id: motionId });
      return data.motion;
    },
    enabled: !!motionId,
  });
}

// Usage in a component:
// const { data, isLoading } = useMotion('m3G3XSJrjEJH');

Apollo Client

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

// Encode API key for Basic auth
const authString = btoa(`YOUR_API_KEY:`);

const client = new ApolloClient({
  uri: 'https://uthana.com/graphql',
  cache: new InMemoryCache(),
  headers: {
    'Authorization': `Basic ${authString}`
  }
});

const GET_MOTION = gql`
  query GetMotion($id: String!) {
    motion(id: $id) {
      id
      name
      created
    }
  }
`;

// Usage:
client.query({
  query: GET_MOTION,
  variables: { id: 'm3G3XSJrjEJH' }
}).then(result => {
  console.log(result.data.motion);
});