useFhirGraphQL

Return a Query for a GraphQL request.

info

This hook simplifies error handling and returns an error if any graphql query is on error.
This simplify the code at the expense of more granular control on partial errors scenarios that are available to GraphQL operation.

If this is what you want, you can use the useFhirGraphQLResult hook to have access to the raw GraphQL response.

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

import { asError } from "@bonfhir/core/r4b";
import { useFhirGraphQL } from "@bonfhir/query/r4b";
import { FhirValue } from "@bonfhir/react/r4b";
import { List } from "@mantine/core";

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

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

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

  return (
    <List>
      {patientsQuery.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 { useFhirGraphQL } 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 = useFhirGraphQL(patientsQueryDocument);

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

Passing variables

import { useFhirGraphQL } 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 = useFhirGraphQL(patientsQueryDocument, {
    active: "true",
  });

  //...
}

With options

import { DEFAULT_FHIR_CLIENT, useFhirGraphQL } 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 = useFhirGraphQL(
    patientsQueryDocument,
    {
      active: "true",
    },
    {
      // The name of the FhirClient to use
      fhirClient: DEFAULT_FHIR_CLIENT,

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

  //...
}