How to iterate useQuery with payload inside or outside onMounted - javascript

i am trying to iterate over a query that requires as variable.
The first thing i tried was doing it inside onMounted like this:
onMounted(async () => {
arrayOfObjects.value.forEach(async (object: ObjectType) => {
const { data } = await useQuery<QueryResponse>({
variables: { id: object.id },
query: QUERY,
});
});
});
Doing this will give the following error:
Error: use* functions may only be called during the 'setup()' or other lifecycle hooks.
So then i tried to save the id in a ref() and set the query outside onMounted like this:
const id = ref<number>();
const { executeQuery: getObject } = await useQuery<QueryResponse>({
variables: { id: id.value },
query: QUERY,
pause: true,
});
onMounted(async () => {
arrayOfObjects.value.forEach(async (object: ObjectType) => {
id.value = object.id;
const objectValue = await getObject();
});
});
The problem here is the despite pause being set to true it will try to execute the query while the ref id is still undefined so the response is the following error:
message: "Variable "$id" of required type "ID!" was not provided."
I know the given ID is correct because i tried using the query with a hardcoded ID.
Any ideas what could help?

Related

React: How to solve graphql/ react query error "Parse error on.."

Here I am trying to get QRcode details by calling graphql query : showQrCode. The code is as follows.
get id using useParams(). Then called useQrCode()
...
const params = useParams();
const { data } = useQrCode(params.id);
...
and also pass the id
...
export const listQrcode = async (id: any) => {
console.log("inside list qrcode")
const result = await useFormProvider(showQrCode, {id});
return result.data
}
export const useQrCode = (id: any) => {
console.log("inside useqrcode", id)
return useQuery(['share-survey-qrcode', id], () => listQrcode(id), {
enabled: !!id,
});
};
...
query:
export const showQrCode = gql`
query qrcodeUrlByFormId (id: $id!){
qrcodeUrl
}
}
`;
Postman :
But here I am facing an issue. I am new to using grapgql query, Is there any issues?
Error:
I refer some documents to fix this but failed. I don't know how to fix this problem. Please give me some suggestions to fix this problem
Error: Parse error on "id" (IDENTIFIER) at [2, 26]: {"response":{"errors":[{"message":"Parse error on "id" (IDENTIFIER) at [2, 26]","locations":[{"line":2,"column":26}]}],"status":200,"headers":{"map":{"cache-control":"max-age=0, private, must-revalidate","content-type":"application/json; charset=utf-8"}}},"request":{"query":"\nquery qrcodeUrlByFormId (id: $id!){\n qrcodeUrl\n }\n}\n","variables":{"id":"57ab92d3-b611-43bb-8e6f-270503c42500"}}}

Why vue reactive variable update _value property instead of value property?

So I am learning vue 3 with composition API and I want to change the .value property of a variable 'filteredProjects' from axios response like so...
const filteredProjects = ref(null)
onMounted(async () => {
await api.get("/project").then(response => filteredProjects.value = response.data);
})
console.log(filteredProjects.value)
I tried console.log(filteredProjects.value) but it returned null, so I checked out the variable without .value property console.log(filteredProjects) and find out that the response data from API is being set on the _value property instead of .value. This is the console result
RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: null, _value: null}
dep: Set(1) {ReactiveEffect}
__v_isRef: true
__v_isShallow: false
_rawValue: {data: Array(13), message: 'successfully get data'}
_value: Proxy {data: Array(13), message: 'successfully get data'}
value: (...)
[[Prototype]]: Object
You're doing an asynchronous call inside the mounted hook which will run after console.log(filteredProjects.value), you could watch the filteredProjects or add async to the setup hook and await the response:
import {ref,watch,onMounted} from 'vue';
const filteredProjects = ref(null)
onMounted(async () => {
await api.get("/project").then(response => filteredProjects.value = response.data);
})
watch(filteredProjects ,()=>{
console.log(filteredProjects.value)
})
or with script setup, no need to add async anywhere :
<script setup>
import {ref,watch} from 'vue';
const filteredProjects = ref(null)
const res = await api.get("/project").
filteredProjects.value = res.data;
console.log(filteredProjects.value)
</script>

Firebase React (native) get documents by reference field

I have created 3 tables in firebase console. Event, occurrence and venue. Now an event can have multiple occurrences, as occurrences are basically shows.
In occurrence document I have event set as reference and venue set as reference.
I query firebase through occurrence to get all the latest shows.
I want to build an array of javascript objects in react that will have id, date (comes from occurrence), title (comes from event) and address (comes from venue).
const [events, setEvents] = useState<any[]>([]);
useEffect(() => {
const subscribe = firestore()
.collection('occurrences')
.onSnapshot(querySnapshot => {
const showList: any[] = [];
querySnapshot.forEach(documentSnapshot => {
const { startDate, event, venue } = documentSnapshot.data();
const show: any = {
id: documentSnapshot.id,
date: startDate,
};
event.onSnapshot(
eventsDocSS => {
show.title = eventsDocSS.get('name');
},
error => console.error('my error', error)
);
venue.onSnapshot(
eventsDocSS => {
show.address =
eventsDocSS.get('addressLocality') + ', ' + eventsDocSS.get('addressRegion');
},
error => console.error('my error', error)
);
showList.push(show);
});
setEvents(showList);
});
return subscribe()
},[])
This code mind you does not work as I would need to run the event and venue snapshots async to make it work. But if I make it async I have cascade it all the way out at least to forEach loop, which does not work as subscribe cannot be async.
I am using #react-native-firebase/firestore but the code should not be that different in syntax.
How do I get setEvents populated with correct data?

I receive an error when attempting to .map through an array from an api

I currently am trying to iterate through an array that I got from an api.
My current code is :
displayEmailList = () => {
let emails = [...this.state.info.emails]
return emails.map(email => {
console.log(email)
})
}
This is my state and async function :
state = {
info: '',
domain: 'homeadvisor.com'
};
async componentDidMount() {
let info = await axios.get(
`https://api.hunter.io/v2/domain-search?domain=${this.state
.domain}&api_key=76056a7300959044150346f9d8dd3c5d6faef844`
);
this.setState({
info: info.data.data
});
}
The Error message I receive is:
TypeError: this.state.info.emails is not iterable
However if I console.log(this.state.info)
I can clearly see that I have an array of emails
Your initial value of info in your state is an empty string.
Initialise your state like this:
state = {
info: {email: []},
domain: 'homeadvisor.com'
}

How to use the GraphQL Get query from aws in React

I'm trying to make use of the getquery for graphql in react.js. But I can't figure out how to go about doing this. I already succeeded to use the list query.
state = { patients: [] }
async componentDidMount() {
try {
const apiData = await API.graphql(graphqlOperation(listxxxx))
const patie = apiData.data.listxxxx.items
this.setState({ patie })
console.log(patie)
} catch (err) {
console.log('qqqqqqqqqqqqqqqqq ', err)
}
}
How does one go about using the get query? Thanks!
You need an ID to retrieve an item with any get query. getPatient(id:"YOUR ID HERE"){}`
Something like...
query Get_Patient_By_Id{
getPatient(id:"2dbcb870-e302-4ed5-a419-68751597129c"){
id
name
}
}
For React, you'll add in the id to the variables list argument:
const getPatient = await API.graphql(
graphqlOperation(
queries.getPatient,
{id: "2dbcb870-e302-4ed5-a419-68751597129c"}
)
);
console.log(getPatient.data.getPatient);
docs: https://aws-amplify.github.io/docs/js/api#simple-query

Categories