Solved

Fetch getting redirected to /auth

gutan
Tourist
4 1 0

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;
 
 
});
Accepted Solution (1)
gutan
Tourist
4 1 0

This is an 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})
});
}

View solution in original post

Replies 2 (2)

garyrgilbert
Shopify Partner
388 40 159

 

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
gutan
Tourist
4 1 0

This is an 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})
});
}