tableProps Dependent on useShow() Attribute Causing Error

Hello, I have a 'show' page for a store that queries for its products by using a permanent on the products --

    const { queryResult } = useShow()
    const { data } = queryResult

    const record = data?.data

    const { tableProps} = useTable({
        resource: "products",
        filters: {
            permanent:
                [{
                    field: "storeID",
                    operator: "eq",
                    value: record?.id,
                },
                ]
        },
    })

    const { queryResult } = useShow()
    const { data } = queryResult

    const record = data?.data

    const { tableProps} = useTable({
        resource: "products",
        filters: {
            permanent:
                [{
                    field: "storeID",
                    operator: "eq",
                    value: record?.id,
                },
                ]
        },
    })

However, because 'record' doesn't exist for a split second before useTable is called, I'm getting the error Error: The provided href (/stores/show/[id]?pageSize=10&current=1) value is missing query values (id) to be interpolated properly. Is there any way I can make useTable 'wait' for the record?.id?

8 Replies

kapa.ai•15mo ago

Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it seems like you're trying to use the useTable hook before the useShow hook has finished fetching the data. This is causing an error because the useTable hook is trying to use the id from the record object, which doesn't exist yet. One way to handle this is to check if the record object exists before calling the useTable hook. You can do this by adding a conditional statement to check if record is not undefined or null. If record does not exist, you can return a loading state or null. Here's an example of how you can do this:

const { queryResult } = useShow()
const { data } = queryResult

const record = data?.data

if (!record) {
    return null; // or your loading state
}

const { tableProps} = useTable({
    resource: "products",
    filters: {
        permanent:
            [{
                field: "storeID",
                operator: "eq",
                value: record?.id,
            },
            ]
    },
})

const { queryResult } = useShow()
const { data } = queryResult

const record = data?.data

if (!record) {
    return null; // or your loading state
}

const { tableProps} = useTable({
    resource: "products",
    filters: {
        permanent:
            [{
                field: "storeID",
                operator: "eq",
                value: record?.id,
            },
            ]
    },
})

This way, the useTable hook will only be called once the record object exists. Please note that this solution is based on the information provided in the extracts and may not cover all possible scenarios or edge cases. For more detailed information, you may want to refer to the official refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below

passive-yellow•15mo ago

@kapa.ai This causes the error Error: Rendered more hooks than during the previous render.

kapa.ai•15mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message "Rendered more hooks than during the previous render" is a common React error that occurs when the number of hooks called between multiple renders of a component is not consistent. This is a violation of the Rules of Hooks (https://reactjs.org/docs/hooks-rules.html) in React. In your case, the useTable hook is being called conditionally. Hooks in React must follow two rules: 1. Only call hooks at the top level: Don't call hooks inside loops, conditions, or nested functions. 2. Only call hooks from React functions: Call them from within React functional components and not regular JavaScript functions. Here's a corrected version of your code:

const {{ queryResult }} = useShow()
const {{ data }} = queryResult

const record = data?.data

// Initialize tableProps outside the condition
let tableProps = {};

if (record) {
    const tableResult = useTable({
        resource: "products",
        filters: {
            permanent: [{
                field: "storeID",
                operator: "eq",
                value: record.id,
            }]
        },
    });
    tableProps = tableResult.tableProps;
}

const {{ queryResult }} = useShow()
const {{ data }} = queryResult

const record = data?.data

// Initialize tableProps outside the condition
let tableProps = {};

if (record) {
    const tableResult = useTable({
        resource: "products",
        filters: {
            permanent: [{
                field: "storeID",
                operator: "eq",
                value: record.id,
            }]
        },
    });
    tableProps = tableResult.tableProps;
}

In this version, useTable is always called, which should prevent the error. However, it's important to note that this might not be the best solution depending on your use case. If useTable makes API calls or has other side effects, you might not want to call it when record is not available. For more information on hooks, you can refer to the refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

<@1122927158348763206> kapa.ai is still learning and improving, please let us know how it did by reacting below

passive-yellow•15mo ago

Same error, unfortunately I should add this error only happens if I hard refresh on the page.

correct-apricot•15mo ago

Hey @avangeous, You can use the queryOptions.enabled prop of the useTable.

passive-yellow•15mo ago

Ahh yes that's what I was looking for. Thanks! Hmm, spoke too soon. Seems its still happening

        queryOptions: {
            enabled: !!record,
        },

        queryOptions: {
            enabled: !!record,
        },

Is this what you meant, inside of useTable?