Currently utilizing Vue Apollo Composable along with useQuery for executing a GraphQL query. Pagination is functioning correctly; however, encountering an issue with the filters.verified variable. Although the variable appears to toggle on the client-side (confirmed through logging), the network request continues to display the initial value as true.
Challenge:
Upon clicking the "RPRs" button, a fetch should be initiated with filters.verified = false. Despite observing the value as false in the console just before the API response, the network tab consistently shows true as the value.
Snippet of pertinent code:
// reactive state controlling pagination
const state = reactive({
pagination: {
limit: 50,
skip: 0
}
});
// reactive state managing filters.verified value: Boolean
const filters = reactive({
verified: true
});
const { result, error, loading } = useQuery(
gql`
query GetMatches($pagination: PaginationInput, $filters: matchFilterInput) {
// ...insert query here
}
`,
{
pagination: state.pagination,
filters: {
verified: {
condition: 'EQUAL',
value: filters.verified
}
}
},
{
fetchPolicy: 'cache-and-network'
}
);
// logic for prev and next page - pagination
const prevPage = () => {
if (state.pagination.skip > 0) {
state.pagination.skip -= 50;
}
};
const nextPage = () => {
// ... (logging and pagination logic)
};
// filter buttons actions
const handleRPR = (event?: MouseEvent) => {
if (filters.verified === false) filters.verified = true;
// ... (other logic)
};
const handleRPRs = (event?: MouseEvent) => {
if (filters.verified === true) filters.verified = false;
// ... (other logic)
};
// ... (Vue watches)
Attempted Solutions:
I've tried manually refetching when pressing the "RPRs" button using the following code snippet:
const handleRPRs = (event?: MouseEvent) => {
if (filters.verified === true) filters.verified = false
activeButton.value = 'RPR-s'
refetch({
pagination: state.pagination,
filters: { verified: { condition: 'EQUAL', value: filters.verified } }
})
}
This method works initially but disrupts the functionality of prevPage and nextPage. Pressing on prevPage resets the query to its initial state with verified: true. It seems like a separate stack is being added independently from the context, working well individually but losing overall structure.
Inquiry:
Based on my understanding, useQuery reacts to changes in its properties. Removing the filters allows prevPage and nextPage to function smoothly. Simply modifying the skip value triggers a refetch. However, when invoking handleRPRs which switches the value of verified to false, an automatic refetch occurs indicating internal change in the query. Nonetheless, the network tab still reflects:
{
"variables": {
"pagination": { "limit": 50, "skip": 0 },
"filters": { "verified": { "condition": "EQUAL", "value": true } }
}
}
Is there something specific I may have overlooked? Can you identify why the request never displays value: false, despite the console reflecting the change to false? Could it possibly relate to execution order? Is the request sent prior to changing the value?
Unable to pinpoint the exact issue or troubleshoot further. Any assistance would be greatly appreciated, thank you.