Quiltt Logo

Query on a Profile's data

Queries are the primary way of fetching data associated with a Profile, such as Connections, Accounts, Transactions and more.

A powerful feature of queries is that they natively support requesting complex, nested data structures. This allows you to:

  1. Reduce the number of network requests required to get the data you need.
  2. Improve the type-safety of your application, letting GraphQL's strongly-typed schema do the heavy lifting.
  3. Pass predictable, structured query responses to components trees in a frameworks like ReactJS.

Link to this section#Available Queries

Currently the following Queries are generally available via GraphQL:

  • account: Look up an Account by its ID.
  • accounts: Get a list of Accounts with filters, search and sort options.
  • connection: Look up a Connection by its ID.
  • connections: Get a list of Connections with filters, search and sort options.
  • transaction: Look up a Transaction by its ID.
  • transactions: Get a paginated list of up to 100 Transactions, with filters, search and sort options.
  • profile: Access information about the authenticated Profile.

Link to this section#Examples

Link to this section#profile Query

In this example, we will define a profile query to get the user's basic profile details:

Link to this section#Request

query GetProfile {
  profile {
    id
    email
    name
    phone
    address {
      city
      state
    }
  }
}

Link to this section#Response

In GraphQL, successful queries always return a data object that mirrors the structure of your request.

{
  "data": {
    "profile": {
      "id": "p_11oaRngjEOLf1YcBdZqKp0E",
      "email": "[email protected]",
      "name": null,
      "phone": null,
      "address": {
        "city": "Dallas",
        "state": "TX"
      }
    }
  }
}

Link to this section#Using Queries with React

The Quiltt React SDK provides a built-in hook to call the Quiltt GraphQL API. Additionally, the GraphQL community provides a rich ecosystem of open-source clients and libraries that seamlessly plug-in to your client-side or server-side framework of choice.

For example, here's the profile query example implemented using our useQuery hook.

import { gql, useQuery } from '@quiltt/react'

// Set up your query string to fetch the user's profile.
const GET_PROFILE = gql`
  query {
    profile {
      id
      email
      name
      phone
    }
  }
`

export const Profile = () => {
  const { loading, data } = useQuery(GET_PROFILE)

  // Display a message while the query is in progress
  if (loading) return <p>Loading...</p>

  // Render the user's name from the response
  return <p>Welcome back {data.profile.name}!</p>
}
Mutations →