Apollo-client: Query result not delivered to component if array contains null values
I have an issue where my query works in Graphiql in my browser, but wont work for me in my React Native app.
This is a condensed version of the query:
``` query getTeam($teamId: String!, $gameweek: Int!) {
team(_id: $teamId) {
_id
history {
score
}
}
If I don’t request `history` it works for me in RN too. When I do request `history` I don't get any data back from the server for team. The server is getting the request and sending back data from my server console logs.
And the definition of team (condensed) is:
type Team {
_id: ID
history: [FixtureHistory]
}
type FixtureHistory {
lineup: [String]
subs: [String]
score: Int
finalLineup: [String]
finalSubs: [String]
autoSubs: [AutoSub]
players: [Player]
}
```
Any idea why this works fine in Graphiql but not with Apollo Client on React Native?
elie222
All 20 comments
Here's a gist of the code: https://gist.github.com/elie222/cb1b594e3b91f7d860454c5a9594823e
elie222
on 5 Apr 2017
What do you mean by "doesn't work"? Does it simply silently fail? What props does your component receive, if any? Are any errors or warnings printed?
stubailo
on 6 Apr 2017
This is the result I receive when I request history:
When I don't request history I receive all the props as expected (team, players, ...).
And the request always works fine with graphiql.
elie222
on 6 Apr 2017
This is the graphiql query (and works fine):
query getTeam($teamId: String!) {
team(_id: $teamId) {
_id
name
userId
playerIds
history {
lineup
subs
score
finalLineup
finalSubs
autoSubs {
in
out
}
}
}
}
And the result:
{
"data": {
"team": {
"_id": "2rMRFYpdeeDBLT825",
"name": "sdasdad",
"userId": "oetzPCTWihKBgDqdk",
"playerIds": [
"43dqNSSs9wWgBEpkf",
"cGxPc4Rfskr3vYGHm",
"4Lawd6McmeDK8chaa",
"3uMZoMiSgn7ANrvLd",
"FqXwEiGQmsunWWyx3",
"r2qvzLRwEW5qTSuHm",
"Cm5neKi3XEpdb3cEF",
"xRQTh6WLc3RpvbeHQ",
"o6f8weMiardSknd5x",
"rdGfYHtp87CG2YWR4",
"YJnw5TTc6LxH3634h",
"5rucfgAirfgXhLWac",
"oQKt3ims4J8YHPGbY",
"JMPut748RhvkbKHGn",
"RXjwt93bBKweiuFXm"
],
"history": [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
{
"lineup": [
"RXjwt93bBKweiuFXm",
"4Lawd6McmeDK8chaa",
"5rucfgAirfgXhLWac",
"JMPut748RhvkbKHGn",
"3uMZoMiSgn7ANrvLd",
"43dqNSSs9wWgBEpkf",
"Cm5neKi3XEpdb3cEF",
"FqXwEiGQmsunWWyx3",
"YJnw5TTc6LxH3634h",
"o6f8weMiardSknd5x",
"rdGfYHtp87CG2YWR4"
],
"subs": [
"cGxPc4Rfskr3vYGHm",
"r2qvzLRwEW5qTSuHm",
"xRQTh6WLc3RpvbeHQ",
"oQKt3ims4J8YHPGbY"
],
"score": 32,
"finalLineup": [
"RXjwt93bBKweiuFXm",
"4Lawd6McmeDK8chaa",
"5rucfgAirfgXhLWac",
"JMPut748RhvkbKHGn",
"3uMZoMiSgn7ANrvLd",
"43dqNSSs9wWgBEpkf",
"Cm5neKi3XEpdb3cEF",
"FqXwEiGQmsunWWyx3",
"YJnw5TTc6LxH3634h",
"o6f8weMiardSknd5x",
"rdGfYHtp87CG2YWR4"
],
"finalSubs": [
"cGxPc4Rfskr3vYGHm",
"r2qvzLRwEW5qTSuHm",
"xRQTh6WLc3RpvbeHQ",
"oQKt3ims4J8YHPGbY"
],
"autoSubs": []
},
{
"lineup": [
"RXjwt93bBKweiuFXm",
"4Lawd6McmeDK8chaa",
"5rucfgAirfgXhLWac",
"JMPut748RhvkbKHGn",
"3uMZoMiSgn7ANrvLd",
"43dqNSSs9wWgBEpkf",
"Cm5neKi3XEpdb3cEF",
"FqXwEiGQmsunWWyx3",
"YJnw5TTc6LxH3634h",
"o6f8weMiardSknd5x",
"rdGfYHtp87CG2YWR4"
],
"subs": [
"cGxPc4Rfskr3vYGHm",
"r2qvzLRwEW5qTSuHm",
"xRQTh6WLc3RpvbeHQ",
"oQKt3ims4J8YHPGbY"
],
"score": 40,
"finalLineup": null,
"finalSubs": null,
"autoSubs": null
},
{
"lineup": [
"RXjwt93bBKweiuFXm",
"4Lawd6McmeDK8chaa",
"5rucfgAirfgXhLWac",
"JMPut748RhvkbKHGn",
"3uMZoMiSgn7ANrvLd",
"43dqNSSs9wWgBEpkf",
"Cm5neKi3XEpdb3cEF",
"FqXwEiGQmsunWWyx3",
"YJnw5TTc6LxH3634h",
"o6f8weMiardSknd5x",
"rdGfYHtp87CG2YWR4"
],
"subs": [
"cGxPc4Rfskr3vYGHm",
"r2qvzLRwEW5qTSuHm",
"xRQTh6WLc3RpvbeHQ",
"oQKt3ims4J8YHPGbY"
],
"score": 64,
"finalLineup": [
"RXjwt93bBKweiuFXm",
"4Lawd6McmeDK8chaa",
"5rucfgAirfgXhLWac",
"JMPut748RhvkbKHGn",
"3uMZoMiSgn7ANrvLd",
"43dqNSSs9wWgBEpkf",
"Cm5neKi3XEpdb3cEF",
"FqXwEiGQmsunWWyx3",
"YJnw5TTc6LxH3634h",
"o6f8weMiardSknd5x",
"rdGfYHtp87CG2YWR4"
],
"finalSubs": [
"cGxPc4Rfskr3vYGHm",
"r2qvzLRwEW5qTSuHm",
"xRQTh6WLc3RpvbeHQ",
"oQKt3ims4J8YHPGbY"
],
"autoSubs": []
},
{
"lineup": [
"RXjwt93bBKweiuFXm",
"4Lawd6McmeDK8chaa",
"5rucfgAirfgXhLWac",
"JMPut748RhvkbKHGn",
"3uMZoMiSgn7ANrvLd",
"43dqNSSs9wWgBEpkf",
"Cm5neKi3XEpdb3cEF",
"FqXwEiGQmsunWWyx3",
"YJnw5TTc6LxH3634h",
"o6f8weMiardSknd5x",
"rdGfYHtp87CG2YWR4"
],
"subs": [
"cGxPc4Rfskr3vYGHm",
"r2qvzLRwEW5qTSuHm",
"xRQTh6WLc3RpvbeHQ",
"oQKt3ims4J8YHPGbY"
],
"score": 12,
"finalLineup": [
"RXjwt93bBKweiuFXm",
"4Lawd6McmeDK8chaa",
"5rucfgAirfgXhLWac",
"JMPut748RhvkbKHGn",
"3uMZoMiSgn7ANrvLd",
"43dqNSSs9wWgBEpkf",
"Cm5neKi3XEpdb3cEF",
"FqXwEiGQmsunWWyx3",
"YJnw5TTc6LxH3634h",
"oQKt3ims4J8YHPGbY",
"rdGfYHtp87CG2YWR4"
],
"finalSubs": [
"cGxPc4Rfskr3vYGHm",
"r2qvzLRwEW5qTSuHm",
"xRQTh6WLc3RpvbeHQ",
"o6f8weMiardSknd5x"
],
"autoSubs": [
{
"in": "oQKt3ims4J8YHPGbY",
"out": "o6f8weMiardSknd5x"
}
]
},
{
"lineup": [
"RXjwt93bBKweiuFXm",
"43dqNSSs9wWgBEpkf",
"r2qvzLRwEW5qTSuHm",
"FqXwEiGQmsunWWyx3",
"JMPut748RhvkbKHGn",
"4Lawd6McmeDK8chaa",
"oQKt3ims4J8YHPGbY",
"xRQTh6WLc3RpvbeHQ",
"o6f8weMiardSknd5x",
"YJnw5TTc6LxH3634h",
"rdGfYHtp87CG2YWR4"
],
"subs": [
"cGxPc4Rfskr3vYGHm",
"5rucfgAirfgXhLWac",
"3uMZoMiSgn7ANrvLd",
"Cm5neKi3XEpdb3cEF"
],
"score": 42,
"finalLineup": [
"RXjwt93bBKweiuFXm",
"43dqNSSs9wWgBEpkf",
"r2qvzLRwEW5qTSuHm",
"FqXwEiGQmsunWWyx3",
"JMPut748RhvkbKHGn",
"4Lawd6McmeDK8chaa",
"oQKt3ims4J8YHPGbY",
"5rucfgAirfgXhLWac",
"o6f8weMiardSknd5x",
"YJnw5TTc6LxH3634h",
"rdGfYHtp87CG2YWR4"
],
"finalSubs": [
"cGxPc4Rfskr3vYGHm",
"xRQTh6WLc3RpvbeHQ",
"3uMZoMiSgn7ANrvLd",
"Cm5neKi3XEpdb3cEF"
],
"autoSubs": [
{
"in": "5rucfgAirfgXhLWac",
"out": "xRQTh6WLc3RpvbeHQ"
}
]
},
{
"lineup": [
"RXjwt93bBKweiuFXm",
"43dqNSSs9wWgBEpkf",
"r2qvzLRwEW5qTSuHm",
"FqXwEiGQmsunWWyx3",
"JMPut748RhvkbKHGn",
"4Lawd6McmeDK8chaa",
"oQKt3ims4J8YHPGbY",
"xRQTh6WLc3RpvbeHQ",
"o6f8weMiardSknd5x",
"YJnw5TTc6LxH3634h",
"rdGfYHtp87CG2YWR4"
],
"subs": [
"cGxPc4Rfskr3vYGHm",
"5rucfgAirfgXhLWac",
"3uMZoMiSgn7ANrvLd",
"Cm5neKi3XEpdb3cEF"
],
"score": null,
"finalLineup": null,
"finalSubs": null,
"autoSubs": null
},
{
"lineup": [
"RXjwt93bBKweiuFXm",
"43dqNSSs9wWgBEpkf",
"r2qvzLRwEW5qTSuHm",
"FqXwEiGQmsunWWyx3",
"JMPut748RhvkbKHGn",
"4Lawd6McmeDK8chaa",
"oQKt3ims4J8YHPGbY",
"xRQTh6WLc3RpvbeHQ",
"o6f8weMiardSknd5x",
"YJnw5TTc6LxH3634h",
"rdGfYHtp87CG2YWR4"
],
"subs": [
"cGxPc4Rfskr3vYGHm",
"5rucfgAirfgXhLWac",
"3uMZoMiSgn7ANrvLd",
"Cm5neKi3XEpdb3cEF"
],
"score": null,
"finalLineup": null,
"finalSubs": null,
"autoSubs": null
},
{
"lineup": [
"RXjwt93bBKweiuFXm",
"43dqNSSs9wWgBEpkf",
"r2qvzLRwEW5qTSuHm",
"FqXwEiGQmsunWWyx3",
"JMPut748RhvkbKHGn",
"4Lawd6McmeDK8chaa",
"oQKt3ims4J8YHPGbY",
"xRQTh6WLc3RpvbeHQ",
"o6f8weMiardSknd5x",
"YJnw5TTc6LxH3634h",
"rdGfYHtp87CG2YWR4"
],
"subs": [
"cGxPc4Rfskr3vYGHm",
"5rucfgAirfgXhLWac",
"3uMZoMiSgn7ANrvLd",
"Cm5neKi3XEpdb3cEF"
],
"score": null,
"finalLineup": null,
"finalSubs": null,
"autoSubs": null
},
{
"lineup": [
"RXjwt93bBKweiuFXm",
"43dqNSSs9wWgBEpkf",
"r2qvzLRwEW5qTSuHm",
"FqXwEiGQmsunWWyx3",
"JMPut748RhvkbKHGn",
"4Lawd6McmeDK8chaa",
"oQKt3ims4J8YHPGbY",
"xRQTh6WLc3RpvbeHQ",
"o6f8weMiardSknd5x",
"YJnw5TTc6LxH3634h",
"rdGfYHtp87CG2YWR4"
],
"subs": [
"cGxPc4Rfskr3vYGHm",
"5rucfgAirfgXhLWac",
"3uMZoMiSgn7ANrvLd",
"Cm5neKi3XEpdb3cEF"
],
"score": null,
"finalLineup": null,
"finalSubs": null,
"autoSubs": null
}
]
}
}
}
I even created a teamHistory(teamId: $teamId) query just now that all it does is return the history information but again, it only works with graphiql and not apollo client.
elie222
on 6 Apr 2017
I've faced the same problem (in the browser not in RN) with a query resulting in nested arrays. The client get the JSON result back, however the result is empty (as seen from React-apollo). No errors. If I modify the query and remove the nested arrays it is working. And the query with nested arrays is working in GraphiQL.
jagare
on 6 Apr 2017
@helfer this looks like the same bug that I still need to create a test case for :D https://github.com/apollographql/apollo-client/issues/1389
thebigredgeek
on 6 Apr 2017
Did you find a work around for it?
If I add an id to the nested query would that help?
On Thu, 6 Apr 2017, 19:17 Andrew E. Rhyne, notifications@github.com wrote:
@helfer https://github.com/helfer this looks like the same bug that I
still need to create a test case for :D #1389
https://github.com/apollographql/apollo-client/issues/1389—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/apollographql/apollo-client/issues/1551#issuecomment-292226356,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AC8oX4u5sRauYZPF3oMYbpPbsRfC2F6dks5rtRAJgaJpZM4M0vwC
.
elie222
on 6 Apr 2017
In our case, we discovered today that running the graphql HoC twice on a single component with two different queries caused this to happen.
thebigredgeek
on 6 Apr 2017
@elie222 definitely try to add an id to the nested queries. I intermittently had failed queries (outlined in issue #1518) because the cache couldn't store data without an id. It's error is being swallowed as well, so you're not alerted of the issue.
derek-duncan
on 6 Apr 2017
Well, I think that is different. If you don't have an ID for a nested type, and you have specified dataIdFromObject, it will try to normalized the object under some sort of undefined permutation... which means it will probably try to write the different data over and over on the same index.
thebigredgeek
on 6 Apr 2017
So adding an _id field didn't help at all unfortunately.
I'm dealing with an array of objects btw. These objects shouldn't have ids, but even when I added them, the error remains the same.
elie222
on 7 Apr 2017
I created an error repo for the problem here:
https://github.com/elie222/react-apollo-error-template
If you don't ask for history in the query it works fine, but when you do request history, no document is returned to the client.
elie222
on 7 Apr 2017
In my case the problem was related to the server respons not having the exact shape of the query: sometime objects where missing in the answer. However the parsing errors were swallowed. This should have resulted in an error. Instead things where loaded in the store as if everything was working, except I didn't get the data in my React graphql HoC.
BTW: I also tried implementing dataIdFromObject, but it didn't help.
jagare
on 7 Apr 2017
I finally found the source of the error based on your comments @jagare. Note, this is specific to Apollo, all works fine in graphiql and looks like it should work fine. Seems to be a bug with Apollo.
Apollo wasn't happy with me sending null in the array.
This works fine:
const teamData = {
_id: 1,
history: [
{},
{lineup: ['a', 'b', 'c']},
{lineup: ['a', 'b', 'c']},
]
}
This doesn't work fine:
const teamData = {
_id: 1,
history: [
null,
{lineup: ['a', 'b', 'c']},
{lineup: ['a', 'b', 'c']},
]
}
This is the schema we're talking about btw (and in the error repo I posted above):
const FixtureHistoryType = new GraphQLObjectType({
name: 'FixtureHistory',
fields: {
lineup: { type: new GraphQLList(GraphQLString) },
},
});
const TeamType = new GraphQLObjectType({
name: 'Team',
fields: {
_id: { type: GraphQLID },
history: { type: new GraphQLList(FixtureHistoryType) },
},
});
A different issue I just had with optimistic updates related to arrays of objects again. Again, the silent failure:
https://github.com/apollographql/apollo-client/issues/1566
I figured that one out at least.
elie222
on 9 Apr 2017
Also experiencing a similar problem. I have multiple id fields which are null. It looks like apollo is automatically creating a reference hash using the null values (which breaks).
tomtang539
on 28 Apr 2017
Thanks for the reproduction and detailed error report @elie222. I will look into it tomorrow and will try to fix it asap.
helfer
on 28 Apr 2017
@elie222 I found the bug and fixed it, just have to write a test for it. I'll release it later today :tada:
helfer
on 5 May 2017
@helfer I have similar issue.
{
company {
addresses { name }
}
}
When I query company A with result { addresses: [..] }, it return the adresses.
Then I query company B with result { addresses: null },
and then query Company A again, it show empty addresses.
Also disabling dataIdFromObject fixed it, returning empty array also fixed it.
P/S: Let me know if I should open new issue for this.
kievechua
on 28 Aug 2017
Related issues
jamesreggio
·
3Comments
omatrot
·
3Comments
joergbaier
·
3Comments
treecy
·
3Comments
gregorskii
·
3Comments