Fetch getting redirected to /auth

Retired Boards Appdev Tools
1

Hi I am trying to use a fetch on pages/products.js as follows, somehow it its not getting to my route but redirected to /auth. Any idea how i can implement a

GET https://fb54327b9b9a.ngrok.io/auth 400

/pages/products.js

import { Card, Layout, Page } from ‘@shopify/polaris’;
import React from ‘react’;
import ProdctList from ‘../components/rest/ProductList’;

class Prodcts extends React.Component {

state = {
items:
}
componentDidMount(){
fetch(‘/api/getProducts’, {method: ‘get’})
.then((res) => {
const res2 = res.clone().text();
console.log(res2);
res.json();
})
.then(items => {
this.setState({items})
});
}
render() {
let products = this.state.items.products;
return (

<Layout.AnnotatedSection
title=“Products”
description=“List of products in this section”>

</Layout.AnnotatedSection>

)
}
}

export default Prodcts;

server.js

//=======================================================================//
// GET Products Route
//=======================================================================//

router.get(‘/api/getProducts’, verifyRequest(), async (ctx, res) => {
console.log(“test”);
const shop = ctx.session;
const accessToken = ctx.cookies.get(‘accessToken’);
const response = await products.getProducts(accessToken, shop);
ctx.body = response.data;
ctx.res.statusCode = 200;

});

2

what does verifyrequest() do in your route? I’m guessing in there is your issue?

3

I have actually gotten it to work. I edited my _app.js file like this

import ApolloClient from “apollo-boost”;
import { ApolloProvider } from “react-apollo”;
import App from “next/app”;
import { AppProvider } from “@shopify/polaris”;
import { Provider, useAppBridge } from “@shopify/app-bridge-react”;
import { authenticatedFetch } from “@shopify/app-bridge-utils”;
import { Redirect } from “@shopify/app-bridge/actions”;
import “@shopify/polaris/dist/styles.css”;
import translations from “@shopify/polaris/locales/en.json”;
import ‘./styles.css’;

function userLoggedInFetch(app) {
const fetchFunction = authenticatedFetch(app);

return async (uri, options) => {
const response = await fetchFunction(uri, options);

if (
response.headers.get(“X-Shopify-API-Request-Failure-Reauthorize”) === “1”
) {
const authUrlHeader = response.headers.get(
“X-Shopify-API-Request-Failure-Reauthorize-Url”
);

const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.APP, authUrlHeader || /auth);
return null;
}

return response;
};
}

function MyProvider(props) {
const app = useAppBridge();
const fetchFunction = userLoggedInFetch(app);
const client = new ApolloClient({
fetch: fetchFunction,
fetchOptions: {
credentials: “include”,
},
});

const Component = props.Component;

return (

<Component {…props} fetch={fetchFunction}/>

);
}

class MyApp extends App {
render() {
const { Component, pageProps, host } = this.props;
return (

<Provider
config={{
apiKey: API_KEY,
host: host,
forceRedirect: true,
}}

<MyProvider Component={Component} {…pageProps} />


);
}
}

MyApp.getInitialProps = async ({ ctx }) => {
return {
host: ctx.query.host,
};
};

export default MyApp;

and added this.props to the page calling the api

componentDidMount(){
this.props.fetch(‘/api/getProducts’)
.then((res) => res.json())
.then(items => {
this.setState({items})
});
}