Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Handling Respose Third Party API Integration - [SOLVED]

Handling Respose Third Party API Integration - [SOLVED]

StMartins1
New Member
4 0 1

[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>
  );
}

 

 

Replies 0 (0)