[Network error]: Error: only absolute urls are supported

Highlighted
Pathfinder
83 4 11

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

 

Highlighted
New Member
2 0 0

Having the same issue. What was the solution?

0 Likes
Highlighted
Tourist
12 1 0

Having the same issue as well. In my case, I was running the app via `shopify serve` and it was working. I stopped the server to install a package, then when I re-ran it, it started giving me the 'only absolute urls are supported' error and wouldn't verify my app at all. I've tried removing the packages (which were react-boostrap and bootstrap), but it seems like my app just permanently won't start, even if it's in the same state where it was working literally an hour ago.

Hope someone can provide some information on what's happening or how to fix this.

0 Likes
Highlighted
Shopify Partner
7 0 0

Same error here. It is something related to graphql which fetches something in the backend at an URL like /graphql which is not absolute.

Hopefully they will fix it soon.

0 Likes