Request external API Data (Shopify App)

Retired Boards Appdev Authentication
1

Hey guys,

i am currently developing an app for the Shopify App Store. I am trying to send a request to an external API with authentication using fetch. Without authentication it seems to work, but I get “TypeError: Failed to fetch” for an authenticated request.

const [data, setData] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
    const url = "https://url";
    const token ="123";

    fetch(url, {
      method: "GET",
      headers: {
        "Authorization": `${token}`
      }
    })
      .then(response => {
       console.log(response.body)
        return response.json();
      })
      .then(jsonData => setData(jsonData))
      .catch(error => setError(error));
  }, []);

My goal is it to create a dropdown from the response data.Can somebody point me in the right direction?

Thanks!

1 Like
2

are you sure you have the right authorization header? Does doing the fetch outside of your app with authorization header work?

Cheers,

Gary

1 Like
3

If you’re encountering a CORS error while attempting to make an external API request from a Remix Shopify APP, the issue may stem from an incorrect method of making API requests within Remix.

According to Shopify’s documentation, the initial assumption might be that you need to set up an App Proxy, but this approach is ineffective.

The problem arises because I was trying to make a request in the same manner as a typical React Front End application - with useEffect()/useState(). This resulted in a CORS error. Since Remix is designed for Server Side Rendering, we need to initiate external resource requests from the backend using Remix’s concept of a Loader.

import { useLoaderData } from "@remix-run/react";
import { axios } from "axios";

export async function loader() {
    return await axios.get('https://exteranl-url.com/users');
}

export default function Users() {
const data = useLoaderData