Vue 3 taps into the power of reactive queries with Apollo GraphQL

Struggling to implement a dynamic query following the guidelines at , but facing difficulties in making it work.

Error:

Uncaught (in promise) Error: Invalid AST Node: { query: { kind: "Document", definitions: [Array], loc: [Object] }, loadingKey: "loading" }.

The query inside export default (where 'checked' is a reactive boolean bound to a button defined in the data()):

apollo: {
    getTags: getTags,
        getPhotos: {
        query() {
            if (this.checked)
                return {
                    query: getPhotos,
                    loadingKey: "loading",
                }
            else {
                return {
                    query: getPhotosByTag,
                    loadingKey: "loading",
                }
            }
        },
        update: (data) => data.getPhotos || data.getPhotos,
        },
},

GQL getPhotosByTag:

const getPhotosByTag = gql`
    query getPhotosByTag {
        getPhotos: findTagByID(id: 326962542206255296) {
            photos {
                data {
                    name
                    description
                    _id
                }
            }
        }
    }
`

GQL getPhotos:

const getPhotos = gql`
    query getPhotos {
        getPhotos: getPhotos(_size: 50) {
            data {
                name
                description
                _id
            }
        }
    }
`

If I separate these queries and attempt to use skip() with 'checked' and '!checked' in the query definition, only the initial load executes the query. Clicking the button does not trigger a new query. However, the queries work individually without any issues.

Answer №1

apollo: {
    fetchImages: {
        read() {
            return this.checked ? getImages : getImagesByTag
        },
        loadingKey: "loading",
        update: (data) => data.getImages || data.getImages,
    },
},

The loading key must be at the same level as the query.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm about to lose my mind because of this JavaScript code - is there a syntax

My code is showing an unexpected token < error, even though all the < signs are correctly placed. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Document</title> </head> <body& ...

What is the best way to send a POST request with axios in a React application?

Having trouble with the axios post request. When I press the Button, nothing seems to happen. Supposedly, the data I input into the fields should be submitted to the API. However, there's no redirection or any indication that the submission is success ...

Vuetify alters the text color of the <vs-button> element

Outline of the Issue Upon installing vuetify, the text color of my <vs-button> has changed from white to black. Despite trying to adjust the color in the vuetify theme, I am unable to change it back. I have also created a custom filter rule using po ...

Tips for validating form input upon submission in Angular 6

Within my Angular application, I have successfully implemented form validators. However, I am aiming to trigger form validation specifically upon submission. This means that when the user clicks on the submit button and the form is invalid, the errors indi ...

Issue with VueJS/Nuxt: When using this.$router.push, the wrong template is being returned to the <nuxt-link> tag

Currently, I'm developing a search feature that takes the value from a select box and sends the user to the appropriate page. However, there seems to be an issue where the wrong template is being called upon rendering, resulting in no content being di ...

What causes the text field and checkbox to move downward as I enter text?

I'm currently working on a mock login page using React and Material UI. I implemented a feature where the show/hide password icon only appears when the user starts typing in the password field. However, after making this change, I noticed that the pas ...

Steps to minimize the Bootstrap expanded menu on devices such as iPhone, iPad, Smartphones, tablets, etc. by simply tapping outside of the menu

Hello there! I'm currently working on a website project using Bootstrap framework v2.0.1. One interesting challenge I'm facing is related to the navigation menu behavior on different devices such as iPhones, iPads, tablets, and smartphones. When ...

Vue-ChartJS does not exhibit reactive behavior

Brand new to constructing charts and currently facing an issue where the chart is not updating dynamically even though the data is being loaded into the dataset. This is how my chart.js file looks: import { Line, mixins } from 'vue-chartjs' con ...

Unable to transfer data from S3 using piping in a node.js environment

I'm attempting to fetch a file from AWS S3 and stream it to the Express response. Here is my current code: async getMedia(key) { const data = await s3.getObject( { Bucket: process.env.AWS_BUCKET_NAME, Key: key, }, ...

Monochrome Effect Triggered by Cursor Hover

I'm attempting to use Javascript with HTML5 canvas to convert an image to greyscale, but I seem to be missing something in my code. Can anyone spot the error? I feel like I'm very close! function grayscaleConversion(str) { // Access the Canv ...

Ensuring that the text in the Bootstrap navbar is responsive for all screen

Yesterday, I inquired about how to modify my navbar menu to switch from horizontal to vertically arranged depending on layout. However, I've noticed that the responsiveness is not consistent when adjusting the window size. Is there a way to ensure my ...

Determine the original timezone of a website before adjusting it to match my own local time

When it comes to websites, some operate on daylight saving time while others don't. I'm curious if there's a way to determine the timezone settings of a website before it displays the time on my computer. You can visit the site here: After ...

Nodemailer is failing to send emails on Heroku

Recently, I encountered an issue that has been puzzling me. I use cloud9 for work and nodemailer works perfectly fine, sending all emails from a form I created. However, when I deployed a small server to Heroku with just a change in an environmental vari ...

Is it possible for me to listen to an AngularJS event using regular JavaScript, outside of the Angular framework?

Is it possible to listen to an event triggered in AngularJS using regular JS (outside of Angular)? I have a scenario where an event is being emitted using RxJS in Angular 2. Can I observe that event from pure JS? Here's some example pseudo code: imp ...

React has the ability to disregard rendering outdated components of the UI that were generated programmatically

It's a bit tricky to pinpoint the bug, so let me describe what is going on instead. To simplify things, I have an array named strArr with three strings. Here's how I display them: <p>{strArr[0] + strArr[1]} <span>{strArr[2]}</span ...

Using asynchronous import statements in Vue allows for more efficient loading of components

I am using Vue and have a method in my file called load.js. async function loadTask(x) { return await x; // Some async code } export { loadTask }; In one of my Vue components, I call the method but encounter an issue where the use of await prevents the ...

Retrieve information from a URL within the same domain by utilizing jQuery, then add it to a div

I have a website that utilizes Cloudflare services. I can access basic information such as user IP, user agent, and the specific Cloudflare server being used to direct my website traffic at this URL: https://www.example.com/cdn-cgi/trace (you can also view ...

Express in Node.js throwing error: 'Cannot GET /'

I recently created a contact us form on my website where users can input their email, name, and gender. The entered data is then stored in an output.txt file. Everything was working fine when I initially developed the website. However, today when I tried t ...

Error: The property 'classList' of null is unreachable for HTMLImageElement

I'm facing an issue on my website that's causing the following error message to pop up: Uncaught TypeError: Cannot read property 'classList' of null at HTMLImageElement. Here's the code I've been using: https://jsfiddle. ...

Autocomplete causing issues with Mui visual display

Encountering an issue with my Mui components login page where autofill information collapses the placeholder. Essentially, when a saved username and password autofills the fields, the autocomplete details overlap with the placeholder text. See Bug Screens ...