Swapping out 'useResult' in graphql for Vue and Apollo: A step-by-step guide

I need to replace the useResult function that is fetching data from GraphQL with a computed function.

const locationOptions = useResult(
       result,
       [],
       ({ getLocations }): Option[] => formatOptions(getLocations)
     )

Instead, I want to change it to a computed function like this:

const locationOptions = computed(() => result.value.getLocations ?? [])

I tried using a watch to run the function but it doesn't seem to be working:

watch(locationOptions, () => {
      formatOptions(locationOptions.value)
    })

Any suggestions on how to make this work?

Answer №1

Utilize the existing format function within the computed function like this:

const cityOptions = computed(() => {
    return info.value?.getCities ? applyFormat(info.value.getCities) || []
})

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

Choosing CSS/JS selector: Pick the final element with a class that does not match

My goal is to extract the most recent td element from the latest tr within an HTML table, ensuring that the latest td does not belong to the disabled class. I am attempting to achieve this using pure JavaScript with CSS selectors (without relying on jQuer ...

Obtaining cookies from a separate domain using PHP and JavaScript

Imagine you have a cookie set on first.com, called "user". Now, the goal is to retrieve that cookie on second.com using JavaScript and AJAX. Unfortunately, it's not working as expected and you're receiving xmlHttp.status=0. Here is a sample code ...

Save JSON data in an HTML document or vice versa

Hey there, the title of this post might seem a bit unclear but I couldn't think of another way to phrase it. So here's the dilemma: I have some data that is JSON encoded and stored in a .json file: {"foo":"bar", "bar":"foo", "far":"boo"} Additi ...

What is the most effective approach to invoking a handling function within a React component?

While delving into the ReactJs documentation on Handling events, I found myself pondering about the preferred method for invoking a handling function within a component. A simple yet fundamental question crossed my mind: when should one use either onClick ...

Custom container width causes animation to crash when scrolling

I'm having trouble with my header. When the containers change with scrolling, an animation takes place. Everything works fine with native Bootstrap CSS, but when I customize the width of the container in my custom CSS (the width set to 1140px), the an ...

What could be causing the createReadStream function to send a corrupted file?

My current task involves generating a file from a URL using the fs module to my local system. Initially, everything seems successful. However, when attempting to post this file into a group using the createReadStream() function, I encounter an issue where ...

Is it possible to import Vue directly from the "/path/to/vue.js" file without using npm or NodeJs?

Is it possible to build a web app using just a single index.js file and importing other available files like shown in this image: https://i.stack.imgur.com/02aFF.png encountering the error message: import not found: default Do you have to use Vuejs wit ...

Unable to removeClass and addClass as expected

Each time I click on a div, it gets encased in a black line. However, my goal is for the previously selected div to lose the black outline whenever I click on a different div. Only the current div should have the border. Below is the code snippet that I a ...

The AngularJS templates' use of the ternary operator

Is there a way to implement a ternary operation in AngularJS templates? I am looking for a way to apply conditionals directly in HTML attributes such as classes and styles, without having to create a separate function in the controller. Any suggestions wo ...

Creating dynamic links within HTML through real-time updating

In my application, I have a feature that generates a list of words and converts them into clickable links. When the user clicks on a link, I want to extract the {{word.name}} from the HTML link without navigating to a new page. I simply need to retrieve th ...

Utilizing the FormsModule and ReactiveFormsModule within a Component module

I am facing an issue with integrating a reactive form into a generated component called boom-covers. I am utilizing the [formGroup] property as shown below: <form name="boomCovers" method="post" id="bomCovers" (ngSubmit)=&q ...

I am attempting to transmit an Error Object through an Axios POST request, but the server is receiving an empty Object

Hey everyone, I'm currently working on creating a Logging Microservice specifically for capturing frontend errors. The goal is to log all errors in a specific format like the example below: catch(err){ sendToLogs({message: 'Could not read input ...

Attempting to modify the state within a nested object located in an array by using json data

My objective is to retrieve data from the Google Books API, which returns JSON data in a similar format to what my state displays. I aim to update the title with the title string provided by the JSON data. Currently, I am encountering a "failed to compile" ...

`Loading CSS and JS files in node.js: A step-by-step guide`

I've searched through numerous similar questions without success, so I'm reaching out for help. My folder structure looks like this: Source Code Frontend Graphs.html Graphs.css Temperature.js Server_Backend server.js I aim ...

What benefits does the 'setup' hook offer in Vue3?

In my personal opinion, I find the syntax of vue2 where method, props, and data are clearly differentiated to be more preferable. However, I am intrigued about the rationale behind the creation of the setup feature in Vue. ...

Invoke a function from a different vue.js component using the this.$refs property

I'm facing an issue with triggering a sibling element. What I've tried so far <b-img @click="callFileLoader"/> <b-file type="file" ref="fileUploader"></b-file> ... methods:{ callFileLoader () { this.$refs.fileUploader.c ...

Running multiple Karma and Jasmine projects within a single solution efficiently (and the necessity for Jenkins integration)

In our extensive solution, we are managing various projects with Karma & Jasmine Tests. Utilizing Jenkins for continuous integration, our goal is to streamline the process by running the Karma execute command just once. This means eliminating the need to m ...

Breaking down React.js element

This Navigation component handles various functionalities related to user authentication and routing. import React from 'react'; import {Navbar, Nav, NavItem, Modal, Button, FormControl} from 'react-bootstrap'; import {BrowserRouter, L ...

When passing context to createPage for use in a query, there may be issues if a string is inadvertently converted to a number, causing the query to fail

I am facing an issue with a page creation function that I have implemented. Here is the code snippet: createPage({ context: { productId: String(productId) }, Despite explicitly converting the ID to a string, the page template is still receiving it as a ...

The process of incorporating or expanding an object within a component

When using vue.js, you have the ability to iterate over an array of items in your template as shown below: <div id="app"> <div v-for="(item, i) in items">i: item</div> </div> <script> var example2 = new Vue({ el: &ap ...