I build a sample react node app using the tutorial, then modified the GraphQL query to pull all products and display them on a page. I started getting this error:
[Network error]: Error: only absolute urls are supported
Couldn't figure out why. The page takes about 15 seconds to load. Each time its running the GraphQL query and pulling data from the Shopify Products table, I'm getting this error.
Index.js
import {
Page,
} from '@shopify/polaris';
import ProductList from '../components/product-list';
class Index extends React.Component {
render() {
return (
<Page>
<ProductList />
</Page>
);
}
}
export default Index;
product-list.js
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import {
Card,
ResourceList,
Stack,
TextStyle,
} from '@shopify/polaris';
import React, { useState } from "react";
const GET_ALL_PRODUCTS = gql`
{
products(first: 10) {
pageInfo {
hasNextPage
hasPreviousPage
}
edges {
node {
id
title
handle
description
images(first: 1) {
edges {
node {
originalSrc
altText
}
}
}
variants(first: 1) {
edges {
node {
taxCode
price
id
taxable
}
}
}
}
}
}
}
`;
function ProductList(props) {
const [selectedItems, setSelectedItems] = useState([]);
const resourceName = {
singular: 'product',
plural: 'products',
};
return (
<Query query={GET_ALL_PRODUCTS} >
{({ data, loading, error }) => {
if (loading) return <div>Loading…</div>;
if (error) return <div>{error.message}</div>;
console.log(data);
return (
<Card>
<ResourceList
showHeader
items={data.products.edges}
resourceName={resourceName}
renderItem={renderItem}
selectedItems={selectedItems}
onSelectionChange={setSelectedItems}
/>
</Card>
);
}}
</Query>
);
function renderItem(item) {
const title = item.node.title;
return (
<ResourceList.Item
id={id}
>
<Stack>
<Stack.Item fill>
<h3>
<TextStyle variation="strong">{title}</TextStyle>
</h3>
</Stack.Item>
</Stack>
</ResourceList.Item>
);
}
}
export default ProductList;
server.js
require('isomorphic-fetch');
const dotenv = require('dotenv');
const Koa = require('koa');
const next = require('next');
const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth');
const { verifyRequest } = require('@shopify/koa-shopify-auth');
const session = require('koa-session');
dotenv.config();
const { default: graphQLProxy } = require('@shopify/koa-shopify-graphql-proxy');
const { ApiVersion } = require('@shopify/koa-shopify-graphql-proxy');
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const { SHOPIFY_API_SECRET_KEY, SHOPIFY_API_KEY } = process.env;
app.prepare().then(() => {
const server = new Koa();
server.use(session({ secure: true, sameSite: 'none' }, server));
server.keys = [SHOPIFY_API_SECRET_KEY];
server.use(
createShopifyAuth({
apiKey: SHOPIFY_API_KEY,
secret: SHOPIFY_API_SECRET_KEY,
scopes: ['read_products', 'write_products'],
afterAuth(ctx) {
const { shop, accessToken } = ctx.session;
ctx.cookies.set('shopOrigin', shop, {
httpOnly: false,
secure: true,
sameSite: 'none'
});
ctx.redirect('/');
},
}),
);
server.use(graphQLProxy({version: ApiVersion.October19}))
server.use(verifyRequest());
server.use(async (ctx) => {
await handle(ctx.req, ctx.res);
ctx.respond = false;
ctx.res.statusCode = 200;
return
});
server.listen(port, () => {
console.log(`> Ready on http://localhost:${port}`);
});
});
