Handling Respose Third Party API Integration - [SOLVED]

[StMartins1]

[SOLVED] - Was returning json.data rather than json.id

The POST request is succesful to the API and I can console log the data I expect to see within the server client. However I can't for the life of me succesfully return this data on the client side route. I've tried a few iterations on the client side with no luck! Any help is much appreciated.

Based on this example:

https://shopify.dev/docs/custom-storefronts/hydrogen/data-fetching/third-party

Custom Client Snippet:

export function createApiClient({
  cache,
  waitUntil,
}) {
  const withCache = createWithCache({cache, waitUntil});

  async function query(
    query,
    options = {variables: {}, cache: CacheLong()},
  ) {
    return withCache(
      ['r&m', query, JSON.stringify(options.variables)],
      options.cache,
      async function () {
        // call to the API
        const response = await fetch('https://api.com', {
          method: 'POST',
          headers: {
            'Content-type': 'application/json',
          },
          body: JSON.stringify({Data goes here}),
        });

        if (!response.ok) {
          throw new Error(
            `Error fetching from api: ${response.statusText}`,
          );
        }

        const json = await response.json();
        console.log(json) //Correct response data shown here
        return json.data;
      },
    );
  }

The JSON retured is simple:

{
  id: 269060
}

Client Side Code:

// Fetch and return API data with a Remix loader function
export async function loader({context}) {
  const characters = await context.my.query(CHARACTERS_QUERY, {
    cache: CacheShort(),
  });
  return json({characters});
}

// Render the component using data returned by the loader
export default function Characters() {
  const {characters} = useLoaderData();
  return (
    <div>
      <h1>{characters}</h1>
 
    </div>
  );
}