1

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 !

Improve this question

2 Answers 2

Reset to default
1

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.
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

5 Comments

in my cade what should i write in { variables ; yourQueryVariableObject} !!! can you give me an answer depending on information that i posted ?
yourQueryVariableObject is basically like the query variable example you have provided.
Please don't go around stackoverflow asking for the entire solution to your application code like this. At best, the community provides you ideas, pointers, and explanations to what you can do. You should put in the effort to study the docs, and read other people's example, then implement them yourself.
Yes now it works I can get all the orders data, but I'm still stuck on the other tasks with is adding a button when I click on it it opens other page that shows the orders details, the Order query have an ID variable as shows in the post! So I don't know how to pass it to the children component ( single order component)
Again, this is something you should figure out too. Please read some fundamentals in react on how state works, and how props can be passed. There are a lot of solutions, so find one that you can use.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.