Solved

GQL Query won't use variables - React Remix

tajbowness
Shopify Partner
13 2 4

When making a GQL Query with variables, the variables won't be used. Have I done something wrong? My code below:

 

 

import { authenticate } from "../shopify.server";

export const fetchAllProducts = async (request) => {
    try {
        const { admin } = await authenticate.admin(request);

        // let hasNextPage = true;
        let afterCursor = null;
        let allProducts = [];

        for (let i = 0; i <= 7; i++) {
            const response = await admin.graphql(`#graphql
                query allProducts($first: Int!, $after: String) {
                    products(first: $first, after: $after, reverse: true) {
                        edges {
                            node {
                                id
                            }
                        }
                        pageInfo {
                            hasNextPage
                            startCursor
                            endCursor
                        }
                    }
                }
            `, {
                first: 10,
                after: afterCursor
            });

            const { data } = await response.json();

            const products = data.products.edges.map(edge => edge.node.id);
            allProducts = [...allProducts, ...products];

            // hasNextPage = data.products.pageInfo.hasNextPage;
            afterCursor = data.products.pageInfo.endCursor;
        }

        return allProducts;
    } catch (error) {
        console.error('Error fetching products:', error);
        return [];
    }
};

 

 

Mutations with variables haven't been a problem for me. Locally making the query with variables on the graphiql playground doesn't cause any issues and returns expected result.

 

Server Logs:

Error fetching products: GraphqlQueryError: Variable $first of type Int! was provided invalid value  

 

Accepted Solution (1)
tajbowness
Shopify Partner
13 2 4

This is an accepted solution.

Thanks for the insight. I've managed to fix it. Turns out the variables just had to be wrapped with braces, ay ay ay, I spent to long with this.

This is the solution.

 

const variables = {
    first: 10,
    after: afterCursor
}

const response = await admin.graphql(`#graphql
    query allProducts($first: Int!, $after: String) {
        products(first: $first, after: $after, reverse: true) {
            edges {
                node {
                    id
                }
            }
            pageInfo {
                hasNextPage
                startCursor
                endCursor
            }
        }
    }
`, { variables });

 

Documentation referred to: (Under, Getting Started > Query for a product)

https://github.com/Shopify/shopify-app-js/tree/main/packages/api-clients/admin-api-client#readme

 

Thanks again for the reply, the insight really helped out. I'm not using Apollo, I'm using what's provided by shopify when you create the remix app template.

temp.PNG

 

Should I swap to Apollo?

View solution in original post

Replies 5 (5)

tajbowness
Shopify Partner
13 2 4

With variables.PNG

WITH VARIABLES

Without Variables.PNG

WITHOUT VARIABLES : The result is the same the server gives from my code. That's why I believe that the inputted variables to the query aren't being used.

tajbowness
Shopify Partner
13 2 4

Hey, I've tried that, unfortunately, same result. Is my code valid?

tajbowness
Shopify Partner
13 2 4

To get all products, assuming the store doesn't have over 250 products. Theres a 250 product limit, so you'll have to loop to get all products.

ShopifyDevSup
Shopify Staff
1415 231 484

Hi @tajbowness ,

 

The way GraphQL variables need to be defined to be sent along with the query varies by client so you'd want to check the docs for whichever client library it is that you're using.

 

The end result should be compatible with the Apollo server format [docs with an example] where the final POST body has separate 'query' and 'variables' fields to hold each of those things. This is usually handled behind the scenes by the client library.

 

Hope you have a great day

Developer Support @ Shopify
- Was this reply helpful? Click Like to let us know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

tajbowness
Shopify Partner
13 2 4

This is an accepted solution.

Thanks for the insight. I've managed to fix it. Turns out the variables just had to be wrapped with braces, ay ay ay, I spent to long with this.

This is the solution.

 

const variables = {
    first: 10,
    after: afterCursor
}

const response = await admin.graphql(`#graphql
    query allProducts($first: Int!, $after: String) {
        products(first: $first, after: $after, reverse: true) {
            edges {
                node {
                    id
                }
            }
            pageInfo {
                hasNextPage
                startCursor
                endCursor
            }
        }
    }
`, { variables });

 

Documentation referred to: (Under, Getting Started > Query for a product)

https://github.com/Shopify/shopify-app-js/tree/main/packages/api-clients/admin-api-client#readme

 

Thanks again for the reply, the insight really helped out. I'm not using Apollo, I'm using what's provided by shopify when you create the remix app template.

temp.PNG

 

Should I swap to Apollo?