Re: GraphQL and Ajax issue

Jackson_Behan1 · ‎01-19-2023

I am experiencing a very strange problem and I can't begin to understand why it's happening.

I have multiple custom built websites (not built on shopify) that use the shopify api to pull in data. On the frontend of my sites I make an Ajax call to a php file on my server that grabs collections and their products using curl and shopify's GraphQL API.

This has been working for years and was literally working yesterday 1/18/23. Today, every site I do this for (4 sites, 4 separate shopify stores) they are all broken.

The strangest thing is if I run the file in the terminal it returns all the data. For some reason starting today, when the file is called through Ajax from the front end - all the data is null.

Here is an example of the php file. I removed the sensitive data:

<?php

$collections = array('sauces', 'apparel', 'special');

$all_products_array = array();

foreach($collections as $collection_handle) {

$query = <<<'JSON'
query($collection_handle: String!) {
  collectionByHandle(handle: $collection_handle) {
    handle
    products(first: 50) {
      edges {
        cursor
        node {
          id
          title
          status
          description
          tags
          images(first: 1) {
            edges {
              node {
                originalSrc
              }
            }
          }
          variants(first: 10) {
            edges {
              node {
                id
                price
                inventoryQuantity
              }
            }
          }
        }
      }
    }
  }
}
JSON;


  $curl = curl_init('https://xxxxxxx.myshopify.com/admin/api/graphql.json');

  $post_data = array();

  $vars = array();

  $vars['collection_handle'] = $collection_handle;

  $post_data['query'] = $query;

  $post_data['variables'] = $vars;

  $post_data = json_encode($post_data);

  curl_setopt($curl, CURLOPT_CUSTOMREQUEST, "POST");
  curl_setopt($curl, CURLOPT_POSTFIELDS, $post_data);
  curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($curl, CURLOPT_POST, true);
  curl_setopt($curl, CURLOPT_HTTPHEADER, array(
      'Content-Type: application/json',
      'X-Shopify-Access-Token: XXXXXXXXXXXX')
  );

  $results = curl_exec($curl);

  curl_close($curl);

  $results = json_decode($results);

  $results = $results->data->collectionByHandle;

  array_push($all_products_array, $results);
}

echo json_encode($all_products_array);

?>

Again, running this code in terminal works exactly how it should and always has - line 80 echos out an array of arrays of product data.

When I call this file from the front end using Ajax, starting today, it returns an array of nulls. I have not touched anything from yesterday to today and I have no idea how to troubleshoot this.

Any insight would be a greatly appreciated.

PaulNewton · ‎01-19-2023

What is run in a console is not what is running in totality in production.

ala "works on my machine" ala "works from my ip"

Debug in production itself , or a development clone in the exact same environment/host.

If shopify is returning data then it's not a shopify api problem, that's what you need to establish.

I have not touched anything from yesterday to today and I have no idea how to troubleshoot this.

If you've ever touched it there's always a chance it's been broken for awhile and you've been seeing a false positive cache.

Is there logging, or version control , that can 100% verify that nothing has changed.

If version control run a bisect.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need

Save time & money ,Ask Questions The Smart Way

Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org

Jackson_Behan1 · ‎01-19-2023

I understand your skepticism. These setups have not been broken, they do sales daily. I know with 100% certainty that nothing has changed on my end but forget that for now. Here are 3 simple files:

Index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js.js"></script>
</body>
</html>

js.js

$.ajax({
    url: "get-collections.php",
    type: "POST",
    success: function(data) {
        console.log(data)
    },
    error: function(err) {
        console.log(err);
    }
});

get-collections.php

<?php

$collections = array('sauces', 'apparel', 'special');

$all_products_array = array();

foreach($collections as $collection_handle) {

$query = <<<'JSON'
query($collection_handle: String!) {
  collectionByHandle(handle: $collection_handle) {
    handle
    products(first: 50) {
      edges {
        cursor
        node {
          id
          title
          status
          description
          tags
          images(first: 1) {
            edges {
              node {
                originalSrc
              }
            }
          }
          variants(first: 10) {
            edges {
              node {
                id
                price
                inventoryQuantity
              }
            }
          }
        }
      }
    }
  }
}
JSON;


  $curl = curl_init('https://xxxxxxxxxx.myshopify.com/admin/api/graphql.json');

  $post_data = array();

  $vars = array();

  $vars['collection_handle'] = $collection_handle;

  $post_data['query'] = $query;

  $post_data['variables'] = $vars;

  $post_data = json_encode($post_data);

  curl_setopt($curl, CURLOPT_CUSTOMREQUEST, "POST");
  curl_setopt($curl, CURLOPT_POSTFIELDS, $post_data);
  curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($curl, CURLOPT_POST, true);
  curl_setopt($curl, CURLOPT_HTTPHEADER, array(
      'Content-Type: application/json',
      'X-Shopify-Access-Token: xxxxxxxxxxxxxx')
  );

  $results = curl_exec($curl);

  curl_close($curl);

  $results = json_decode($results);

  $results = $results->data->collectionByHandle;

  array_push($all_products_array, $results);
}

echo json_encode($all_products_array);
?>

If I run get-collections.php in the terminal it returns the data. In this case an array of 3 arrays. The 3 arrays have product data in them.

If I go to Index.php in the browser - the ajax call in js.js returns an array of 3 arrays each with null.

[null,null,null]

PaulNewton · ‎01-19-2023

There's no clarity though, the variables are still vastly different.

Massive gulf there in possible problems.

get-collections.php in the terminal is not Index.php in the browser.

Ignore the ajax ,Add logging in php , confirm the source server logic works.

Then go back to ajax, then of course rule out browser , check different browsers, devices, etc.

And inspect the network response in browser dev tools.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need

Save time & money ,Ask Questions The Smart Way

Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org

Jackson_Behan1 · ‎01-19-2023

It's not the browsers, that's one of the first things I checked.

I am aware get-collections.php in the terminal is not index.php in the browser. But I could use help with the logging. I'm not sure how to "confirm the source server logic works". Is that something you could help me with or point me to a resource?

Here is the network tab:

PaulNewton · ‎01-19-2023

In the network tab click on each source name for better detail

https://developer.chrome.com/docs/devtools/network/

If you can just navigate directly to get-collection.php skipping javascript ajax to verify JSON is output.

For logging in php that's a broad topic:

https://www.google.com/search?q=php+logging

Then if after going through all the layers points to shopify Grapql check rate limits and error codes

https://shopify.dev/api/admin-graphql#rate_limits

https://shopify.dev/api/admin-graphql#status_and_error_codes

And if private app see today's changelog

https://shopify.dev/changelog/private-apps-are-automatically-converting-to-custom-apps

Contact paull.newton+shopifyforum@gmail.com for the solutions you need

Save time & money ,Ask Questions The Smart Way

Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org

Jackson_Behan1 · ‎01-19-2023

Thanks a lot, I will look into the logging.

I didn't even think to go directly to get-collections.php in the browser. That still returns [null, null, null] so I guess it has nothing to do with ajax.

Jackson_Behan1 · ‎01-22-2023

Update:

I couldn't figure out a single thing to even try to fix this. You can believe me or not but I haven't changed anything and I just checked my sites that were experiencing this issue after not looking at them all weekend and they are all working again. How could this not have been a bug with the API? This problem was happening on my local and a remote server and now the problem has resolved itself.

Re: GraphQL and Ajax issue

Why are my Ajax calls to Shopify's GraphQL API returning null?

Community Blog Articles