[FIXED] How to process a Shopify GraphQL Bulk Request and download the response?

Issue

I'm very new to javascript and graphQL in general. I've done my best to do my own research but now it's getting a bit more complicated and I'm a little lost.

I'm building an app for Shopify (React/Node) where it basically queries all my store's unfulfilled orders, and retrieves all the items in these orders. I'm only looking for one type of item, and it's coffee -- we roast it, so we need to know the total weights for all our coffee products. It looks a little something like this with a plain graphQL query:

1

I exceed the limits for a plain query though, so I need to make a bulk query request. I've managed poll a bulk query fine and retrieve the data in the console, but this is something I have to actively call within the app - I need to data to be there ready for when my app loads, and then I need the data to be there and manageable so I can map it in the same way I did my plain query... and for the life of me I can't figure it out. Any help would be appreciated, I'm not expecting anyone to do it entirely for me, but I really barely just grasped how to do a .post request. I've only really been pursuing this a month or so now.

I'm trying to get these queries here:

import gql from 'graphql-tag';

const BULK_OP = gql`
mutation {
  bulkOperationRunQuery(
    query:"""
    {
      orders(reverse:true, query: "fulfillment_status:unshipped AND status:open") {
        edges {
          node {
            id
            name
            lineItems {
              edges {
                node {
                  quantity
                  name
                  product {
                    productType
                    metafield(namespace: "global", key:"SO_num") {
                      value
                    }
                  }
                  variant {
                    weight
                  }
                }
              }
            }
          }
        }
      }
      collections(first: 1, query: "id:260752932934") {
        edges {
          node {
            id
            products(first: 3, sortKey: BEST_SELLING) {
              edges {
                node {
                  title
                  metafield(namespace: "global", key: "SO_num") {
                    value
                  }
                }
              }
            }
          }
        }
      }
    }
"""
 ) {
   bulkOperation {
     id
     status
   }
   userErrors {
     field
     message
   }
 }
}
`;

const CHECK_BULK = gql`
  query {
    currentBulkOperation {
      id
      status
      errorCode
      createdAt
      completedAt
      objectCount
      fileSize
      url
      partialDataUrl
    }
  }
`;


export { BULK_OP, CHECK_BULK }

I would post more of my code, but at this point I feel like most of it will be need to be redone on the basis of what I have to actually do to get this data before the app loads.

Any help would be appreciated, even a point in the right direction.

Thanks!

Solution

Bulk operations are designed for long-running processing.

It's just a chain of data-flow formed using separate requests.

Example for Apollo client (see docs for option details):

• useMutation to 'send' bulk - returns bulk id;

• useQuery to check processing state ... you can use polling option to automatic re-querying (use network-only fetch policy) ... and skip to stop after finished - returns status, url, partialDataUrl;

• when a bulk data ready, just fetch (use axios/fetch/whatever) to download prepared data [probably json] file from url (provided with query response) - the bulk response;

• use your [json decoded] data in component;

Hint: run mutation (on demand, from [some onClick] event handler) in separate component to not mix send/receive operations ... you can store/save bulk id [and processing state] in localStorage to be available on refresh

Answered By - xadm

Answer Checked By - Timothy Miller (PHPFixing Admin)