useFhirGraphQLResult

Return a Query for a GraphQL request.

info

This hook returns the full GraphQL operation, and never get on error in case of GraphQL errors. This allows you to handle partial errors scenarios or get access to GraphQL extensions if need be, at the expense of increased complexity.

If you only want the full result of GraphQL execution, you should probably use the useFhirGraphQL hook.

GraphQL queries only

This hooks is intended for GraphQL query operations only.

If you need to execute a mutation, you need to use the useFhirGraphQLMutation hook.

Usage with GraphQL queries as string

/* eslint-disable @typescript-eslint/no-explicit-any */
import { asError } from "@bonfhir/core/r4b";
import { useFhirGraphQLResult } from "@bonfhir/query/r4b";
import { FhirValue } from "@bonfhir/react/r4b";
import { List } from "@mantine/core";

export default function MyComponent() {
  const patientsQuery = useFhirGraphQLResult(`
    query Patients {
      PatientList {
        id
        name {
          given
          family
        }
      }
    }
  `);

  if (patientsQuery.isLoading) {
    return <div>Loading...</div>;
  }

  if (patientsQuery.isError) {
    return <div>{asError(patientsQuery.error)?.message}</div>;
  }

  // You have access to GraphQL extensions as well here
  patientsQuery.data?.extensions;

  return (
    <List>
      // the first data is for React Query, the second for the GraphQL response
      {patientsQuery.data?.data?.PatientList.map((patient: any) => {
        return (
          <List.Item key={patient.id}>
            <FhirValue type="HumanName" value={patient.name} />
          </List.Item>
        );
      })}
    </List>
  );
}

Usage with typed GraphQL

It is possible to generate proper type information for GraphQL queries. The details depend on your setup, but following this guide should get you started. You can then do this:

codegen.ts

import type { CodegenConfig } from "@graphql-codegen/cli";

export default {
  schema: "fhir-schema.graphql.json",
  documents: ["./src/**/*.tsx"],
  emitLegacyCommonJSImports: false,
  ignoreNoDocuments: true,
  generates: {
    "./src/gql/": {
      preset: "client",
    },
  },
} satisfies CodegenConfig;

import { HumanName } from "@bonfhir/core/r4b";
import { useFhirGraphQLResult } from "@bonfhir/query/r4b";
import { FhirQueryLoader, FhirValue } from "@bonfhir/react/r4b";
import { List } from "@mantine/core";
// This file is generated by @graphql-codegen/cli using the codegen.ts configuration above
import { graphql } from "../gql";

export default function MyComponent() {
  const patientsQueryDocument = graphql(/** GraphQL */ `
    query Patients {
      PatientList {
        id
        name {
          given
          family
        }
      }
    }
  `);

  // patientsQueryDocument is strongly typed based on the query

  const patientsQuery = useFhirGraphQLResult(patientsQueryDocument);

  return (
    <FhirQueryLoader query={patientsQuery}>
      {(result) => (
        <List>
          {result.data?.PatientList?.map((patient) => {
            return (
              <List.Item key={patient?.id}>
                <FhirValue
                  type="HumanName"
                  value={patient?.name as HumanName}
                />
              </List.Item>
            );
          })}
        </List>
      )}
    </FhirQueryLoader>
  );
}

Passing variables

import { useFhirGraphQLResult } from "@bonfhir/query/r4b";
import { List } from "@mantine/core";
import { graphql } from "../gql";

export default function MyComponent() {
  const patientsQueryDocument = graphql(/** GraphQL */ `
    query Patients($active: String) {
      PatientList(active: $active) {
        id
        name {
          given
          family
        }
      }
    }
  `);

  // If using the graphql-codegen, variables are strongly typed
  const patientsQuery = useFhirGraphQLResult(patientsQueryDocument, {
    active: "true",
  });

  //...
}

With options

import { DEFAULT_FHIR_CLIENT, useFhirGraphQLResult } from "@bonfhir/query/r4b";
import { List } from "@mantine/core";
import { graphql } from "../gql";

export default function MyComponent() {
  const patientsQueryDocument = graphql(/** GraphQL */ `
    query Patients($active: String) {
      PatientList(active: $active) {
        id
        name {
          given
          family
        }
      }
    }
  `);

  const patientsQuery = useFhirGraphQLResult(
    patientsQueryDocument,
    {
      active: "true",
    },
    {
      // The name of the FhirClient to use
      fhirClient: DEFAULT_FHIR_CLIENT,

      // React query options
      query: {
        gcTime: Number.POSITIVE_INFINITY,
      },
    },
  );

  //...
}