Skip to main content

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