Fixes #1933 - GraphQL Connection API

packages/docs/docs/search/graphql.mdx

@@ -222,9 +222,46 @@ Another common use is to filter an `extension` array by `url`:
 
 See the "[List Navigation](https://hl7.org/fhir/r4/graphql.html#list)" section of the FHIR GraphQL specification for more information.
 
+## Connection API
+
+Using the normal "List" search (i.e., "PatientList") is the most common way to search for resources. However, the FHIR GraphQL specification also supports the [Connection API](https://hl7.org/fhir/graphql.html#searching), which is a more complex way to search for resources.
+
+The most immediate advantage to the Connection API is better support for pagination and retrieving total counts. The Conenction API also includes more features from FHIR Bundle such as `mode` and `score`.
+
+To use the Connection API, append "Connection" to the resource type rather than "List". For example, use "PatientConnection" instead of "PatientList".
+
+Here is an example of searching for a list of `Patient` resources using the Connection API:
+
+<Tabs groupId="language">
+  <TabItem value="graphql" label="GraphQL">
+    <MedplumCodeBlock language="graphql" selectBlocks="ConnectionApiGraphQL">
+      {ExampleCode}
+    </MedplumCodeBlock>
+  </TabItem>
+  <TabItem value="ts" label="Typescript">
+    <MedplumCodeBlock language="ts" selectBlocks="ConnectionApiTS">
+      {ExampleCode}
+    </MedplumCodeBlock>
+  </TabItem>
+  <TabItem value="curl" label="cURL">
+    <MedplumCodeBlock language="bash" selectBlocks="ConnectionApiCurl">
+      {ExampleCode}
+    </MedplumCodeBlock>
+  </TabItem>
+</Tabs>
+
+<details>
+  <summary>Example Response</summary>
+  <MedplumCodeBlock language="ts" selectBlocks="ConnectionApiResponse">
+    {ExampleCode}
+  </MedplumCodeBlock>
+</details>
+
+See the "[Connection API](https://hl7.org/fhir/graphql.html#searching)" section of the FHIR GraphQL specification for more information.
+
 ## Putting it all together
 
-The FHIR GraphQL syntax is a powerful way to query for multiple related resources in a single HTTP call. The following example combines all the concepts we've covered so far.
+The FHIR GraphQL syntax is a powerful way to query for multiple related resources in a single HTTP call. The following example combines previous concepts.
 
 This query searches for a list of `Patients` named `"Eve"`, living in `"Philadelphia"`, and then searches for all `DiagnosticReports` linked to each `Patient` along with their corresponding `Observations`.
 

packages/examples/src/search/graphql.ts

@@ -613,3 +613,88 @@ response = {
 };
 
 console.log(response);
+
+/*
+ * Connection API
+ */
+
+/*
+// start-block ConnectionApiGraphQL
+{
+  PatientConnection {
+    count
+    edges {
+      resource {
+        resourceType
+        id
+        name { given family }
+      }
+    }
+  }
+}
+// end-block ConnectionApiGraphQL
+*/
+
+/*
+// start-block ConnectionApiCurl
+curl -X POST 'https://api.medplum.com/fhir/R4/$graphql' \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer $your_access_token" \
+  -d '{"query":"{ PatientConnection count { edges { resource { resourceType id name { given family } } } } }"}'
+// end-block ConnectionApiCurl
+*/
+
+// start-block ConnectionApiTS
+await medplum.graphql(`
+{
+  PatientConnection {
+    count
+    edges {
+      resource {
+        resourceType
+        id
+        name { given family }
+      }
+    }
+  }
+}
+`);
+// end-block ConnectionApiTS
+
+response = {
+  // start-block ConnectionApiResponse
+  data: {
+    PatientConnection: {
+      count: 2,
+      edges: [
+        {
+          resource: {
+            resourceType: 'Patient',
+            id: 'example-patient-id-1',
+            name: [
+              {
+                given: ['Bart'],
+                family: 'Simpson',
+              },
+            ],
+          },
+        },
+        {
+          resource: {
+            resourceType: 'Patient',
+            id: 'example-patient-id-2',
+            name: [
+              {
+                given: ['Homer'],
+                family: 'Simpson',
+              },
+            ],
+          },
+        },
+      ],
+    },
+  },
+  // end-block ConnectionApiResponse
+};
+
+console.log(response);

packages/graphiql/src/index.tsx

@@ -62,7 +62,7 @@ const theme: MantineThemeOverride = {
 
 function fetcher(params: FetcherParams): Promise<SyncExecutionResult> {
   if (params.operationName === 'IntrospectionQuery') {
-    return fetch('/schema/schema-v3.json').then((res) => res.json());
+    return fetch('/schema/schema-v4.json').then((res) => res.json());
   }
   return medplum.graphql(params.query, params.operationName, params.variables);
 }