GraphQL

You can send GraphQL requests using the useGql hook or by creating a typed client with queryProvider.

Basic Usage with `useGql`

Creating a Query

Define your GraphQL query using the gql function:

queries/users.ts

import { gql } from 'http-react'
 
const users = gql`
  query {
    users {
      name
      info {
        phone
      }
    }
  }
`
 
export default users

Using the Query

Use the useGql hook to execute your query:

import { useGql } from 'http-react'
import users from 'queries/users'
 
export default function Users() {
  const { data, loading } = useGql(users)
 
  if (loading) return <p>Loading...</p>
 
  if (data.errors) {
    console.log(data.errors)
    return <p>There was an error</p>
  }
 
  return (
    <div>
      {data.data.users.map((user) => (
        <div key={user.id}>
          <h2>{user.info.phone}</h2>
        </div>
      ))}
    </div>
  )
}

💡

By default, the request Key is the query itself. To use the same query with different variables, provide a custom key:

function Component1() {
  const { data } = useGql(q, {
    key: 'query1'
  })
}
 
function Component2() {
  const { data } = useGql(q, {
    key: 'query2'
  })
}

Query Variables

Pass variables to your GraphQL queries using the variables option:

import { useGql } from 'http-react'
import users from 'queries/users'
 
export default function Users() {
  const { data, loading } = useGql(users, {
    variables: {
      id: 10
    }
  })
 
  if (loading) return <p>Loading...</p>
 
  if (data.errors) {
    console.log(data.errors)
    return <p>There was an error</p>
  }
 
  return (
    <div>
      <pre>Variables sent: {JSON.stringify(data.variables)}</pre>
      {data.data.users.map((user) => (
        <div key={user.id}>
          <h2>{user.info.phone}</h2>
        </div>
      ))}
    </div>
  )
}

Custom GraphQL Endpoint

By default, useGql sends requests to /graphql. Change this using the graphqlPath option:

import { useGql } from 'http-react'
import users from 'queries/users'
 
export default function Users() {
  const { data, loading } = useGql(users, {
    variables: {
      id: 10
    },
    graphqlPath: '/graphql/v2'
  })
 
  // Your JSX here
}

Type-Safe Client with `queryProvider`

Create a fully typed GraphQL client with TypeScript support.

Creating a Typed Client

shared/client.tsx

import { queryProvider, gql, defaultCache } from 'http-react'
 
type UserType = {
  name: string
}
 
type UserVariables = {
  id: number
}
 
// Define queries with type arguments for data and variables
const user = gql<UserType, UserVariables>`
  query {
    user {
      name
    }
  }
`
 
// Queries without types will default to 'any'
const tasks = gql`
  query {
    tasks {
      completed
    }
  }
`
 
// Combine all queries
const queries = {
  user,
  tasks
}
 
// Create a typed query hook
const useAppQuery = queryProvider(queries, {
  config: {
    cacheProvider: defaultCache,
    headers: {
      // Global headers for all queries
    }
  },
  defaults: {
    tasks: {
      variables: {
        search: ''
      },
      value: [],
      headers: {
        Authorization: 'Token token-for-tasks'
      },
      baseUrl: 'https://api.com/v1',
      graphqlPath: '/graphql-v1'
    },
    user: {
      variables: {}, // TypeScript error: missing required 'id' field
      value: {
        name: ''
      }
    }
  }
})
 
export default useAppQuery

Learn more about cacheProvider

Using the Typed Client

App.tsx

import useAppQuery from 'shared/client'
 
export default function App() {
  const { data, error } = useAppQuery('user', {
    default: {}, // TypeScript error: missing 'name' property
    variables: {} // TypeScript error: missing required 'id' field
  })
 
  if (data.errors || error) return <p>Error</p>
 
  return (
    <div>
      {/* Fully typed data access */}
      <h2>{data.data.name}</h2>
    </div>
  )
}

TypeScript will catch errors if you reference a query that doesn't exist:

useQuery('$user') // TypeScript error

💡

Error message: Argument of type '"$user"' is not assignable to parameter of type '"tasks" | "user"'

Using `useData` with GraphQL

The useData hook provides full TypeScript support for GraphQL queries:

import { useData, useError } from 'http-react'
import queries from 'shared/client.tsx'
 
function App() {
  // Fully typed data access
  const { name } = useData(queries.user) || {}
  const error = useError(queries.user)
 
  if (error) return <p>Error</p>
 
  return (
    <div>
      <h2>{name}</h2>
    </div>
  )
}

SSR All hooks