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

Jroyce1180
Pathfinder
86 4 22

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

 

Replies 5 (5)

ReapDigital
Visitor
2 0 0

Having the same issue. What was the solution?

MilesLawrence
Tourist
12 1 4

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.

robsanna
Shopify Partner
7 0 1

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.

mgrabau
Visitor
1 0 1

I have been encountering the same error with the "Build a Shopify App with Node and React" https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react

The step where I encountered this is during the "Fetch Data with Apollo" section. Has anyone been able to resolve?

 

HectorLeon
Tourist
4 0 0

@mgrabau i have encountered same issue trying to connect Apollo with my Nextjs app  (React with SSR) have you been able to solve it ? 

Seems to be a problem with this URL right? 
If anyone can help would me much appreciated

const SHOPIFY_STORE_DOMAIN = 'https://{mystorename}.myshopify.com/api/2021-01/graphql.json'