No field of name "pageInfo" found on type "Product" in schema

[ilbertt]

Bug details

Describe the bug
Trying to get a product with graphQLClient (from index.unoptimized.umd) fails.

To Reproduce

• write this code in your React app

const productQuery = client.graphQLClient.query((root) => {
    root.addConnection('productByHandle', { args: { handle: "my-handle" } }, (product) => {
        product.add('title');
    });
});

client.graphQLClient.send(productQuery).then(({ model, data }) => {
    // Do something with the products
    console.log(model, data);
});

• run the app in browser
• get the error:

Error in function SelectionSetBuilder.field in ./node_modules/shopify-buy/index.unoptimized.umd.js:873
No field of name "pageInfo" found on type "Product" in schema

Expected behavior
Function should return the Product element.

Environment (please complete the following information):

• OS: Ubuntu 20.0.4 LTS
• Browser: Opera
• SDK Version: ^2.13.0

Bug Report Checklist

• I have read and agree to the CODE_OF_CONDUCT.md
• I have read the CONTRIBUTING.md guidelines.
• I have provided a detailed description of the bug, including code samples, and/or network data.
• I have provided information about my development environment, including SDK version.

[riccardolardi]

I'm seeing the same error when trying to retrieve a metafield.

    const metafieldQuery = client.graphQLClient.query((root) => {
      root.addConnection(
        'product',
        { args: { handle: 'myHandle' } },
        (product) => {
          product.addConnection(
            'metafield',
            { args: { key: 'has_textfield', namespace: 'my_fields' } },
            (metafield) => {
              metafield.add('value')
            }
          )
        }
      )
    })
    client.graphQLClient
      .send(metafieldQuery)
      .then(({ model, data }) => {
        console.log(model, data)
      })

@Luca8991 any luck yet?

[ilbertt]

@Luca8991 any luck yet?

@riccardolardi nope...

[riccardolardi]

@Luca8991 I worked around it by querying for products instead - this seems to work fine:

      const metafieldQuery = client.graphQLClient.query((root) => {
        root.addConnection('products', { args: { first: 249 } }, (product) => {
          product.add('handle')
          product.addConnection(
            'metafields',
            { args: { first: 249 } },
            (metafield) => {
              metafield.add('key')
              metafield.add('value')
            }
          )
        })
      })
      const metafieldQueryResult = await client.graphQLClient.send(
        metafieldQuery
      )

See more about it here #168

[vankhoafgc]

Have same error when query productRecommendations

[simonhrogers]

I’m trying to fetch the stock of a single product; having the same issue with this error message and same code.

How are we supposed to query a single product if not like this? Handle or ID would both work great for me; but I ideally don’t want to have to loop through 1000+ products every-time I need to check the stock of just one.

[danieladarve]

@simonhrogers were you able to sort out this query?

[simonhrogers]

@danieladarve Nope, sorry! Low budget / tight deadline affair so I’ve had to settle for querying all products until someone else can resolve this. As far as I can tell its an issue with the current version of the buy SDK.

[danieladarve]

@simonhrogers Maybe this will help you.

While you can retrieve a product using the js-buy-sdk

const product = await client.product.fetchByHandle(yourHandle)

In my case the SDK it doesn't return tags and metafields. So here is what I ended up doing at the end:

Created a graphQL Apollo cllient

1. installed npm i @apollo/client apollo-upload-client graphql graphql-request
2. created a client
   -- shopify-apollo-client.js --

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { createUploadLink } from 'apollo-upload-client';

const shopifyApolloClient = new ApolloClient({
  link: createUploadLink({
    uri: `https://${process.env.SHOPIFY_STORE_ID}.myshopify.com/api/2022-01/graphql.json`,
    headers: {
      'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_API_TOKEN,
      Accept: 'application/json',
    },
  }),
  ssrMode: true,
  cache: new InMemoryCache(),
});

export default shopifyApolloClient;

3. ran the query inside the page ( I am using nextJs )
   -- page.js --

import { gql } from '@apollo/client';
import shopifyApolloClient from 'utils/shopify-apollo-client.js';

export async function getServerSideProps(context) {
  const { slug } = context.query
  const { site } = await getPageGlobals();

  const query = gql`
  query {
    product(handle: "${slug}") {
      id
      title
      vendor
      images(first: 1) {
        edges {
          node {
            id
            originalSrc
          }
        }
      }
      handle
      description
      descriptionHtml
      tags
      metafields(first:10){                     
        edges {                         
          node {                             
            key                             
            value                         
          }                     
        }                 
      } 
      variants(first:5){
        edges{
          node{
            id
            title
            selectedOptions {
              name
              value
            }
            sku
            quantityAvailable
            image{
              originalSrc
            }
            priceV2 {
              amount
            }
          }
        }
      }
      priceRange {
        maxVariantPrice {
          amount
        }
        minVariantPrice {
          amount
        }
      }
      availableForSale
    }
  }
  `;

  const { data : { productByHandle } } = await shopifyApolloClient.query( { query: query })

  const pageData = {
    site,
    product: JSON.parse(JSON.stringify(productByHandle)) || null
  }
  return {
    props: {
      data: pageData
    }
  }
}

[Kncarrier]

I have run into this issue too. It looks like this issue is present when trying to query for any singular object and on at least the customer mutations. I am trying the use the customerAccessTokenCreate mutation, but can't get past this error.

Uncaught Error: No field of name "pageInfo" found on type "CustomerAccessTokenCreatePayload" in schema

[liberat0r]

After a few hours of trial & error (mostly error) here's the latest and greatest version of product metafield & tag fetching.

 const productsQuery = this.client.graphQLClient.query((root) => {
	root.addConnection('products', { args: { first: 10 } }, (product) => {
		product.add('title');
		product.add('tags');
		product.add('metafields', {
			args: {
				identifiers: [
					{
						key: "color",
						namespace: "main"
					},
					{
						key: "gender",
						namespace: "main"
					}
				]
			}
		}, (metafield) => {
			metafield.add('value');
		});
	});
});

It would be nice to include it as an example on the README to save other people's time.

[miketu926]

resurfacing this - any idea what the timeline may be to resolve the issue and retrieve metadata/metadatas from SDK?

[miketu926]

or we can have additional fields such as metafield/metafields and tags etc to flow through into the optimized version of .fetch and .fetchAll, rather the optimized graphQLClient

[skeddles]

crap i have the same problem. glad I spent hours trying to debug it when there's been a bug report open for 2 years 😛

trying to do the same thing as @simonhrogers, trying to get the totalInventory of a single specific product. works for products.

I ended up doing what @riccardolardi suggested, which is just querying lots of products and filtering them. seems like a huge waste, but that's on you shopify.

async function getProductsGraphql4(productId) {
	const productsQuery = client.graphQLClient.query((root) => {
		root.addConnection('products', { args: { first: 250 } }, (product) => {
			product.add('title');
			product.add('totalInventory');
		});
	});
	let result = await client.graphQLClient.send(productsQuery)
	return result.data.products.edges.find(p => p.node.id === productId).node;
}

This of course only works if you have less than 250 products. If you had more you'd have to loop through multiple requests and use the cursor to get additional pages (which would be even more ridiculous for getting a single value of a single product).

So uhh... fix this please shopify....

[VladimirCatrici]

@Luca8991, change addConnection to just add in your example, then it should work e.g.:

const productQuery = client.graphQLClient.query((root) => {
    root.add('productByHandle', { args: { handle: "my-handle" } }, (product) => {
        product.add('title');
    });
});

client.graphQLClient.send(productQuery).then(({ model, data }) => {
    // Do something with the products
    console.log(model, data);
});