Querying GraphQL node item within Shopify ScriptTag

Question

I am quite new and having some difficulties getting an output when running a GraphQL query on a shopify scriptTag.

My current code looks like:

const test4 = gql`
query {
  scriptTags(first: 4) {
    edges {
      node {
        id
        src
      }
    }
  }
}
`;

const GiveData = () => (
  <Query query={test4}>
    {({ loading, error, data }) => {
          if (loading) return "Loading...";
          if (error) return `Error! ${error.message}`;

          return (                          
          <div>
          <p> hi1 </p>
            {data.scriptTags.edges.map(({ node }) => (              
              <div key={node.src}>
                <p>
                  hi2 {node.src}
                </p>
              </div>
            ))}
          </div>
          );

    }}
  </Query>
);

My page is rendering the "hi1" text paragraph, but the "hi2" and actual data never loads. My console is also not outputting any error.

The query code itself works perfectly if I run it through the Shopify GraphiQL App, so I assume it isn't that. I believe I am doing something wrong within the GiveData constant, but not sure what.

Thanks in advance for any help or hints.

More context: I have a basic shopify app setup, using react + node.js setup (based on shopify's templates & tutorial).

My server.js file has the script tag scopes included:

...
        createShopifyAuth({
          apiKey: SHOPIFY_API_KEY,
          secret: SHOPIFY_API_SECRET_KEY,
          scopes: ['read_products', 'write_products', 'read_script_tags', 'write_script_tags'],
...

I have been able to write a script tag, as it shows up in the Shopify GraphiQL App. Screenshot of output .

I am also able to get an output from a different GraphQL query. For example this

const test3 = gql`
query {
  shop {
    id
  }
}
`;

with the same basic GiveData constant above, will output a result if I have ...{data.shop.id}... in my return field.

I am primarily wanting to query the script tags I've been able to write myself (not anything outside my app).

David Lazar David Lazar · Accepted Answer · 2019-06-24T14:37:35

It would help to know the context of your call. In Shopify GraphiQL, clearly you are authenticated, the end point is set, all is well. Move away from that and your responsibilities mount. You can query using a private App API password, or a regular App with an oAuth token that has scoped access to script tags. Which are you?

Without knowing more about what you are doing, it is hard to help you along. Also, the liklihood that Shopify will show you any script tags that do not belong to the API key that created them ie) yours, is minimal.

Querying GraphQL node item within Shopify ScriptTag

1 Answers