Apollo is mixing results from a GraphQL Query in React - reactjs

I am making a call that returns questions and their answers. When I make this directly to the server, the response is as expected. Additionally, when react makes the call and I check developer tools, the response is as expected.
Once I get a response from Apollo, the data is mixed and results are bleeding into one another.
You will notice in these two images, the results are the same after a few results are expanded. I am not sure what could be causing this.
Why would freeform be combining?
My setup is like this:
I import the query and then run this on the client which is Apollo:
this.props.client.query({ query: getCoreObjectsQuery, variables: { companyId: 1}})
.then((result) => {
console.log(result, 'getCoreObjectsQuery')
From there, when I go to look at getCoreObjectsQuery, it looks like the above images!

Wow! Turns out to be an Apollo Client caching error.
Kamranicus.com has a really helpful article on this, but to anybody looking for a quick fix:
__typename #skip(if: true)
questions{
id
__typename #skip(if: true)
coreId
question
isCore
type
answer:answerForCoreId{
id
__typename #skip(if: true)
freeform
url
choice {
id
__typename #skip(if: true)
}
}
}
id and _id cache!

Related

Merge query results of queryOneEntityById and queryAllEntitiesByIds in Apollo by __typename

There are two queries to get Posts. One is to get specific post by id (returns object)
query PostById ($id : ID!) {
post (id: $id) {
title
description
}
}
another one is to get all posts by ids (returns array of objects)
query PostsByIds ($ids : ID!) {
posts (ids: $ids) {
title
description
}
}
Entities in both of them have same __typename though from what I see Apollo caches them separately.
Is there a way to tell Apollo to treat everything with same __typename as a part of one data pool? So for example if we already have Post with id===1 received with PostsByIds([1]) on the call to PostById(1) apollo leverage cached data and not making API call?

Get data from firebase/react js

How to get username field from "users" collection in document?
I just want to display in settings user usernamesettings
firestore
I tried to get data from firestore, but it's not working
I'm not sure what your problem is exactly but you can try looking at the docs:
https://firebase.google.com/docs/firestore/query-data/get-data
If you will provide more detail then I might be able to give you direct code for the problem.
import { doc, getDoc } from "firebase/firestore";
const docRef = doc(db, "cities", "SF");
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
console.log("Document data:", docSnap.data());
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
Above code allows you to get the data of a specific document.
the docSnap.data() function returns an object which contains all the fields of a document. You can use it like this for example:
docSnap.data()['name']
Another issue could be with rules. Rules can be used to setup specific conditions and allow access allow to your database when those certain conditions are followed. You could have setup rules but then later never really followed the rules in your app. I would like you to check your rules and then check the app to see if your code follows them.
Hope this helps :D

Firebase GET request orderby 400 bad request

For a get request, I am trying to user order by like below but always get a 400 bad request. Here, multiple users can have multiple blog posts each with a unique id like b1 in screenshot below. The long sequence of characters is the uid of a user under blogs. Each user has their own uid.
https://assignment-c3557-default-rtdb.asia-southeast1.firebasedatabase.app/blogs.json?orderBy="createdAt"
I followed the documentation here
https://firebase.google.com/docs/database/rest/retrieve-data
All I am doing is issuing a simple GET request in react js as follows:
const resp = await fetch(`https://assignment-c3557-default-rtdb.asia-southeast1.firebasedatabase.app/blogs.json?orderBy="createdAt"``)
const data = await resp.json()
if(!resp.ok) { ... }
Below is the database single entry for schema reference
As I said in my previous comment, this URL is invalid:
https://assignment-c3557-default-rtdb.asia-southeast1.firebasedatabase.app/blogs.json/orderBy="createdAt"
                                                                                     ^
The query portion of a URL starts with a ? character.
https://assignment-c3557-default-rtdb.asia-southeast1.firebasedatabase.app/blogs.json?orderBy="createdAt"
                                                                                     ^
Firebase Realtime Database - Adding query to Axios GET request?
I followed the above similar issue resolution to solve my problem

Handle progressive disclosure on frontend with Apollo Client

In my project, we plan to implement a progressive disclosure (displaying some part of UI data if the user has permissions). Basically, we are using react + apollo client with hooks + graphqltag.
But the problem is no that how to hide some part of UI but how to split queries by permissions. So right now for pages, we create a single query containing many "subqueries" for different kinds of data. For example :
export const GET_DATA_X= gql`
query getDataX(
$applicationId: ID!
$dateFrom: String!
$dateTo: String!
$displayMode: String!
) {
applicationShipDates(
applicationId: $applicationId
dateFrom: $dateFrom
dateTo: $dateTo
displayMode: $displayMode
) {
periodStartDate
dates
}
graphStatistics(
applicationId: $applicationId
dateFrom: $dateFrom
dateTo: $dateTo
) {
totalVisits
totalConversions
conversionRate
}
}
`;
And right now each part of this query will be available if the user will have permission. On the backend side, it's already handled. We throw null/empty array and error. But IMO we shouldn't even ask for this part of the data. And that is the question. Do you have any suggestions on how to do this with an apollo client?
Right now I have two ideas on how to do that:
Split queries into single and make a few API calls if the user has permission, otherwise skip it
Write a custom function where I will pass as a prop array of objects, including query definition and query required permissions. I will filter this array by permission and from small query definitions like applicationShipDates or graphStatistics i will create a big query like getDataX which will includes few "subqueries"
Like #xadm mentioned directives will be the best solution.

Foursquare API - Not returning photos

I have a basic Foursquare API account and I'm using venue search, to:
Search for a city location
And then return venue results.
Pretty simple.
I'm using this api, but no photos seem to be available in the API feed for photos.
https://api.foursquare.com/v2/venues/explore?near=london&&client_id={MY-API-KEY}&client_secret={MY-SECRET-KEY}&v=201806044
I'm using ReactJS and making a simple axios request for this api. Code further below...
What's the best way to get photos for a venue? I search and stackoverflow and tried adding &venuePhotos=1 as suggested previously be a user, but that didn't work...
componentDidMount() {
console.log('COMPONENT DID MOUNT');
axios.get('https://api.foursquare.com/v2/venues/explore?near=london&&client_id={MY-API-KEY}&client_secret={MY-SECRET-KEY}&v=201806044&venuePhotos=1')
.then(res => {
console.log('DATA', res.data.response.groups[0].items);
this.setState(
{ places: res.data.response.groups[0].items.slice(0,12)}
);
});
}
Beginning on May 31st, foursquare made five changes in order to simplify their API and maintain the quality of their service as their developer community grows.
https://developer.foursquare.com/docs/announcements#start-up-tier-launch
Venues search, explore, trending, similar, and next endpoints will return the following fields: venue name, venue ID, address, lat/long, and category. To access additional rich content for each venue, please call the details (venues/x) endpoint with venue ID as a parameter.
So, you should call the details (venues/x) endpoint.
https://developer.foursquare.com/docs/api/venues/details

Resources