Shopify Question posted in
The Shopify help center can be found here.

fetching data from graphql to react – Shopify

I cloned this React dashboard and adapted it to my needs then i wanted to fetch data from graphql and display it in a table ( orders and products tables , I’ll continue talking about orders ) then when the user click on a specific button it opens a page that have all the specific details about the order he chooses! an id will be taken from the first query ( orders that display many orders ) and will be passed as a variable to the 2nd query with is order to display that order details . i wanna Know how to display the data from the first query then the specific data for a single order

this is how the UI should look ( it is changed but I just wanted to clarify the idea more ) :

orders list :

enter image description here

orders details :
enter image description here

graphql :

an input type has been created that is likely to be reused.(PaginationInput)
enter image description here

query :

query Orders($input1: PaginationInput) {
   Orders(input: $input1){
    pageInfo {
      hasNextPage
      hasPreviousPage
    }
    edges{
      cursor
      node {
        id
        closed
        email
        createdAt
        updatedAt
        cancelledAt
        displayFinancialStatus
        displayFulfillmentStatus
        lineItems{
          edges{
            node {
              customAttributes{
                key
                value
              }
              id
              quantity
              title
              variant{
                id
                image {
                  altText
                  id
                  src
                }
                title
                weight
                weightUnit
                price
              }
            }
          }
        }
        phone
        subtotalPrice
        totalPrice
        totalRefunded
        totalTax
        processedAt
      }
    }
  }
}

query Order($id: ID!){
  Order (id: $id){
    id
    displayFinancialStatus
        displayFulfillmentStatus
        email
        id
        createdAt
        subtotalPrice
        totalRefunded
        totalShippingPrice
        totalPrice
        totalTax
        updatedAt
        lineItems{
            edges {
                node {
                    customAttributes{
                        key
                        value
                    }
                    quantity
                    title
                    id
                    variant{
                        id
                        title
                        weight
                        weightUnit
                        price
                        image {
                            src
                        }
                    }
                }
            }
        }
        shippingAddress {
            address1
            address2
            city
            company
            country
            countryCode
            firstName
            id
            lastName
            name
            phone
            province
            provinceCode
            zip
        }
  }
}

query variables example :

{
  "input1": {
    "num": 30
  },
  "id": "gid://shopify/Order/order_id_here"
}

i’m still new to graphql so i don’t know ho to do this !

Tags:

2

Answers


  1. 0

    I don’t know about graphql, but I can help you with the UI part, for showing data for a particular order.

    You have a table, and the table has a unique index key for each row. From the Database, we can distinguish all the rows using this key. so, while showing the table you might use node packages for react-tables or the traditional method,

    1. create a column named "Action" and action need to have a button for each row.
    2. Then set the id on its onPress() and then call the API with the id and you will get the detailed data by running the query in the backend, however, you can show the data using the modal or by redirecting to a different page.
    Login or Signup to reply.
  2. 0

    Apollo Client is a pretty good library for React to use graphql to communicate with a backend server.

    Studying Apollo Client’s useQuery hook should provide you what you need.

    Eventually, something along the lines of

    import { gql, useQuery } from '@apollo/client';

const GET_ORDERS = gql`
  query Orders($input1: PaginationInput) {
    Orders(input: $input1) {
      ...
    }
  }
`

// within a functional component
const { loading, error, data } = useQuery(GET_ORDERS, {variables: yourQueryVariableObject});

    You can then display data in your UI.

    I do recommend familiarising yourself with how Apollo Client works first with a smaller example application before attempting to call a large query like Orders you have here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search