Fetch getting redirected to /auth

[gutan]

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 (

<Page>

<Layout.AnnotatedSection

title="Products"

description="List of products in this section">

<ProdctList products={products}></ProdctList>

</Layout.AnnotatedSection>

</Page>

)

}

}

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;

});

[garyrgilbert]

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

[gutan · Accepted solution]

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 (

<ApolloProvider client={client}>

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

</ApolloProvider>

);

}

class MyApp extends App {

render() {

const { Component, pageProps, host } = this.props;

return (

<AppProvider i18n={translations}>

<Provider

config={{

apiKey: API_KEY,

host: host,

forceRedirect: true,

}}

>

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

</Provider>

</AppProvider>

);

}

}

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

});

}