Healthie SDK Troubleshooting

AuthedHealthieProvider.tsx

import {
  ApolloClient,
  ApolloProvider,
  HttpLink,
  InMemoryCache,
  split,
} from "@apollo/client";
import { getMainDefinition } from "@apollo/client/utilities";
import { HealthieProvider } from "@healthie/sdk";
import * as ActionCable from "@rails/actioncable";
import useIsHealthieInitialized from "client/hooks/useIsHealthieInitialized";
import { trpc } from "client/trpc";
import ActionCableLink from "graphql-ruby-client/subscriptions/ActionCableLink";
import React, { useEffect, useState } from "react";

const AuthedHealthieProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const setInitialized = useIsHealthieInitialized(
    (state) => state.setHealthieInitialized
  );
  const [client, setClient] = useState<ApolloClient<any> | null>(null);

  const { data } = trpc.portal.getPatientInfoFromSupabaseUserId.useQuery();

  useEffect(() => {
    if (client) {
      setInitialized(true);
    }
  }, [client, setInitialized]);

  useEffect(() => {
    if (data?.healthieApiKey && !client) {
      const httpLink = new HttpLink({
        uri: "https://api.gethealthie.com/graphql",
        headers: {
          authorization: `Basic ${data.healthieApiKey}`,
          authorizationsource: "API",
        },
      });

      const cable = ActionCable.createConsumer(
        `wss://ws.gethealthie.com/subscriptions?token=${data.healthieApiKey}`
      );
      const wsLink = new ActionCableLink({ cable });

      const link = split(
        // split based on operation type
        ({ query }) => {
          const definition = getMainDefinition(query);
          if (!("operation" in definition)) {
            return false;
          }
          const { kind, operation } = definition;
          return kind === "OperationDefinition" && operation === "subscription";
        },
        wsLink,
        httpLink
      );

      const client = new ApolloClient({
        link,
        cache: new InMemoryCache(),
      });
      setClient(client);
    }
  }, [data?.healthieApiKey]);

  if (!client || !data?.healthieUserId) {
    return <>{children}</>;
  }

  return (
    <ApolloProvider client={client}>
      <HealthieProvider userId={data.healthieUserId}>
        {children}
      </HealthieProvider>
    </ApolloProvider>
  );
};

export default AuthedHealthieProvider;

ChatRoute.tsx

import { ConversationList } from "@healthie/sdk";
import Spinner from "client/Spinner";
import useIsHealthieInitialized from "client/hooks/useIsHealthieInitialized";

const ChatPage = () => {
  const isInitialized = useIsHealthieInitialized(
    (state) => state.isHealthieInitialized
  );
  if (!isInitialized) {
    return <Spinner />;
  }
  return <ConversationList />;
};

export default ChatPage;

Getting this CORS error:

Access to fetch at 'https://api.gethealthie.com/graphql' from origin 'https://app.prosperhealth.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Dependencies:

{
  "dependencies": {
    "@apollo/client": "3.9.7",
    "@healthie/sdk": "1.2.9",
    "@rails/actioncable": "7.1.3-2",
    "graphql": "16.8.1",
    "graphql-ruby-client": "1.13.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
  },
  "devDependencies": {
    "@types/rails__actioncable": "6.1.10",
    "@types/react": "18.2.55",
    "@types/react-dom": "18.2.19",
    "@typescript-eslint/eslint-plugin": "6.18.1",
    "@typescript-eslint/parser": "6.18.1",
    "@vitejs/plugin-react-swc": "3.6.0",
    "typescript": "5.3.3",
    "vite": "5.1.1"
  }
}

Docs I used: https://www.npmjs.com/package/@healthie/sdk