Fetching data not working!

[djsidneygomes]

Hi everyone,

I´m trying to run the code below using React to fetch a simple list of orders:

const { SHOPIFY_API_SECRET, SHOPIFY_API_KEY, SHOPIFY_API_PWD, SHOPIFY_STORE } = process.env; //environment variables

const credencial_encoded = btoa(SHOPIFY_API_KEY + ':' + SHOPIFY_API_PWD);

const headers = new Headers({ 'Content-Type': 'application/json' });

headers.append('Authorization', `Basic ${credencial_encoded}`);

export default function App() {

  const [orders, setOrders] = useState([]);

  useEffect(async () => {

    const response = await fetch('https://' + SHOPIFY_API_KEY + ':' + SHOPIFY_API_SECRET + '@' + SHOPIFY_STORE + '/admin/api/2020-07/orders.json', headers);

    const data = await response.json();

    setOrders(data);

  }, []);

But when i run the "npm start" the browse returns the error below:

Unhandled Rejection (TypeError): Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials:

Can anyone help me with this issue?

[Greg_Kujawa]

If you already are providing the Authorization: Basic credentials then I don't think you need to also provide them in the URL. You are getting a complaint about that in the error code. Try leaving those out of the URL.

Here is a link with some other examples --> https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-shopify. Hope this helps!