Hello,
this is my first experience with front end developing, so probably I do things completely wrong, but I can’t figure whats wrong, so I’m asking for help.
I have a table with data populated from graphql in one component and update dialog in another.
<q-table dense flat hide-bottom :columns="orderColumns" :data="row"
title-class="text-subtitle2 text-bold" :pagination.sync="pagination" row-key="id">
<template v-slot:body="props">
<q-tr :props="props" :class="getClassForRow(props.row.state, props.row.satisfiedLots)">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
{{ col.value }}
</q-td>
<q-td auto-width>
<ManualStockOrdersMenu :strategy="strategy" :row="props.row"/>
</q-td>
</q-tr>
</template>
</q-table>
ManualStockOrdersMenu has reactive structure to hold data that can be edited
const editOrderData = reactive({
id: props.row.id,
strategyId: props.strategy,
input: {
type: props.row.type,
state: props.row.state,
priceStart: props.row.price,
lots: props.row.lots,
percents: props.row.percents
}
})
After update I fully update my table contents with
const {
mutate: updateOrder,
onError: onCreateError,
onDone: onCreateDone,
} = useMutation(updateManualStockStrategyOrder, {
variables: editOrderData,
refetchQueries: [{query: getManualStockStrategyData, variables: {strategyId: props.strategy}}]
})
Table sorts rows by update time, so after edit, row order changes. If I try to edit the same row, editOrderData data points to row that was in this place before. So, with my code, I can reliably edit only this last row in my table (order doesn’t change in this case).
It is extremely complex to me to provide playground, illustrating the issue, but maybe the issue is obvious?
I tried to throw away editOrderData structure and map dialog directly to props.row, however in this case I have an issue with updateOrder mutation variables: values don’t change at all (however, local edits are reflected on screen).
variables: {id: props.row.id, strategyId: props.strategy, input: {type: props.row.type, state: props.row.state, priceStart: props.row.price, lots: props.row.lots, percents: props.row.percents}}, <- props.row contains always contain unmodified values