-
Notifications
You must be signed in to change notification settings - Fork 787
loading is false, but no data is present (and no error) #1314
Comments
I can confirm this issue exists. Offending code: graphql(
gql`
query localise($locale: LocaleType!, $resourceIds: [String]) {
l10nSlugs(locale: $locale, resourceIds: $resourceIds) {
id
resourceId
slug
}
}
`,
{
name,
options: ({ locale }) => ({
variables: {
locale,
resourceIds
},
}),
props: props => ({
l10n: {
/**
* Whether or not the graphql resource is loading.
*/
loading: props[name].loading,
/**
* Conveniently offer the locale.
*/
locale: props.ownProps.locale,
/**
* And the BCP47 normalise version.
*/
bcp47Locale: normaliseBCP47Tag(props.ownProps.locale),
/**
* Localise a slug with insertions.
* @param {string} resourceId Resource ID of the slug to localise.
* @param {string} slug Default slug in case loading.
* @param {Array<string> | Object: []} insertions Dynamic content for the slugs.
* @returns {string} Localised slug.
*/
localise: (resourceId: string, slug: string, insertions: [string] | Object = []): string => {
if (!props[name].loading && !props[name].error) {
^^^^^^^^^^ Checked here...
for (let s of props[name].l10nSlugs) {
^^^^^^^^^^^ BAM!
if (s.resourceId === resourceId) {
return insert(s.slug, insertions)
}
}
}
return insert(slug, insertions)
},
/**
* Locale aware ordinals (e.g. 1st, 2番目)
* @param {Number} ord The numerical ord to convert.
* @returns {string} The locale-specific ordinal
*/
ord2str: (ord: Number): string => props.ownProps.l10nShared(`${ord}ord`),
/**
* Get whether or not the current locale arranges the name Last, First.
* @returns {boolean} True if the locale requires a Last, First name arrangement.
*/
nameLastFirst: (): boolean => NameLastFirstLocales.includes(props.ownProps.locale),
/**
* Gets teh minimum number of characters allowed in the locale's name part.
* @returns {number} The minimum number of characters in the current locale.
*/
minCharsInNamePart: (): number => MinCharsInNamePart[props.ownProps.locale]
}
})
}
) |
Yeah, got the same error when trying to pass my company project to the last version, was previously in 1.4.16. |
Is anyone looking into this? This is a serious bug that is killing quite a bit of my code, now. |
Can confirm this happens now after i updated today to UPD: |
@adamdonahue I'll take a look at this! Still working through issues after launch + took a week off last week! Thanks all for the issue report! |
Btw, i've resolved that on my side by setting |
@javascriptlove Actually, the issue exists with the default setting, too. |
Any workaround that doesn't require adding a check on data for all loading queries ? |
@adamdonahue Can you please provide a stripped down reproduction for us to test? I've tried to reproduce with our test app Githunt, but haven't been able to. |
I just tested with the 1.0.3 of apollo-client, and everything's work for me. Thanks a lot @jbaxleyiii. |
This has been confirmed as fixed with |
Confirmed fixed in 2.0.1. |
EDIT: hi @jbaxleyiii, @peggyrayzis i am using graphcool service to host my data and all my queries work in their playground when I pass in the given ids. However, on the client side, some queries will correctly return the data and some will not return any data even if after some digging around, the data is coming in correctly into |
still have this issue with version '2.0.4' here 😢 . Sometimes it will work with safari but it constantly failed with chrome. |
@crokobit what do you mean by working in safari and failing in chrome? Are you talking about the |
@j4mesjung yes~ |
@jbaxleyiii @peggyrayzis This issue still occurs for me. I am using react native and
Interestingly enough, the issue only arises when I introduce 'id' as a field in my query. If I do not specify 'id' in my query, then everything works as expected. Render flow goes like this:
Hope this helps! |
I'm seeing this too. If it helps, I know the data is already in the store and the request returns the correct data. It seems to happen when I render multiple components with queries at the same time?
|
@denkristoffer do you have any reproduce repo? I can't reproduce this in my branch: https://github.com/xcv58/react-apollo-error-template/tree/2591adeeb9401fb90dcb28ed84c44d53ed58285a |
I have this issue as well, it is a very simple query but it just never return any data when loading is false and error is undefined. "apollo-client": "2.0.4" However it returns very quickly when using graphiql ------------------ update --------------------- Fixed it by adding id to every type in the query, like literally every type mentioned in affected query, otherwise it will not work... |
I have the same problem after running a mutation which returns updated data. |
Can confirm I am having the same problem, used to work when id is attached to every queries, but now it doesn't. Seems to be triggered by a mutation that adds something. |
I have the same problem as well. (apollo-client@2.2.5) This is a serious bug and this issue should be re-opened. |
@valoricDe Setting |
@hwillson Thanks for the update on this issue!
Does that mean that in the next major release, in the example from the changelog, the component which uses If so, that sounds dangerous to me. If the second component is implemented to expect all properties to be available, it would work if it is implemented first. As soon as you add a component that requests less fields, the previous component could break. Also: Is returning partial data really the fix to the problem described at the top of the issue? To me, a good default would be that Or am I missing something? |
I don't see how
from your changelog:
Sorry, but not gonna help for this bug. If anything this feature will just make this bug harder to reproduce. It is a band-aid over the real problem. Please, if I am completely off-base, let me know. |
Would someone here be able to provide a small runnable reproduction that clearly demonstrates this issue? Talking around a concrete example of the problem will definitely help. |
I was able to reproduce the issue, but the use case is a bit special. In my case it was related to how cache identifiers are generated. The example is a bit contrived, but maybe it helps to debug the issue. Have a look at this code sandbox: https://codesandbox.io/s/apollo-error-reproduction-scrcx. One of the query components always renders an empty object. If you remove one, the other one always succeeds. If you look at the cache, it becomes clear why this fails: {
"Article:5d010e4e0bcb900018dd227b": {
"id": "5d010e4e0bcb900018dd227b",
"author": {
"type": "id",
"generated": false,
"id": "Author:Holden Luntz Gallery",
"typename": "Author"
},
"__typename": "Article",
"href": "/article/holden-luntz-gallery-chapter-30-dialogues-great-photographers"
},
"Author:57a4ab99b202a366110001a9": {
"id": "57a4ab99b202a366110001a9",
"profile_handle": null,
"__typename": "Author"
},
"ROOT_QUERY": {
"articles({\"sort\":\"PUBLISHED_AT_ASC\"})": [
{
"type": "id",
"generated": false,
"id": "Article:5d010e4e0bcb900018dd227b",
"typename": "Article"
},
// ...
],
"article({\"id\":\"5d010e4e0bcb900018dd227b\"})": {
"type": "id",
"generated": false,
"id": "Article:5d010e4e0bcb900018dd227b",
"typename": "Article"
}
},
"Author:Holden Luntz Gallery": {
"id": "57a4ab99b202a366110001a9",
"name": "Holden Luntz Gallery",
"__typename": "Author"
}
} The entry with the identifier If you change the I had this bug a few times in a project where cache identifiers might be different based on what data is fetched. I guess my use should at least cause Apollo to throw with a helpful error message if this is a use case that isn't supported. I have to say this is a special use case. Maybe someone else has a better example? The comments above might also be interesting. |
I found a simple example that may help illustrate the issue.
Removing the directive and trying to fetch a field that does not exist on the server does not cause the same issue however and the query will return the fields that do exist, ignoring the missing field. The example is here. |
I've been experiencing a very similar issue when creating a React application with hooks. I have one component nested inside the other and each component has an independent query associated with it; it seems to resolve the outside component but returns an empty object for the inner component. I've test each component as a stand-alone and they both resolve fine when it's just the single query. Any ideas? |
@EternalVigil can you create a reduced CodeSandebox example? @hwillson can we please re-open this issue? It doesn't seem to me that this is solved. |
I am experiencing the same issue as well. I have a Dropdown component in the middle of the render of my component, some data has to be fetched for the dropdown options. after selecting an option, the query reads from the cache but the value of the field inside data is undefined. |
I'm having the same issue, everything worked fine not until I added routing with react-router-dom and boom everything crashes, queries are only made on the first render, and once props changes query now returns data as empty object {} |
Facing a similar issue . Able to see the error message in the apollo-link-error . But
|
@shyamzenefits have you tried upgrading react-apollo? There was an issue with |
@dylanwulf Thanks for the swift response . Will try upgrading 👍 |
@dylanwulf Tried upgrading the apollo packages to v3.1.0 , but still facing the same issue . Any Suggestions ? |
@shyamzenefits Try upgrading to the latest available version (I think it's 3.1.3 right now). If that doesn't help, create a runnable reproduction (possibly with codesandbox) and post it in a new issue. |
I have the same issue, in react data is always undefined despite receiving data from the server .. without the Announcement fragment data works but with the fragment for announcement data is undefined. I tried it with the Panel fragment only and that results in data not being undefined happens both while testing in localhost and in the server after deployment. I do get this warning It links to this https://www.apollographql.com/docs/react/advanced/fragments.html#fragment-matcher Ninja Edit
|
I just tried querying a list of fields with an 'id' param by mistake. Instead of getting an error I just got no data. |
Same issue here, using apollo-boost 0.4.7 and @apollo/react-hooks 3.1.3. Basically, my app will end up with |
Can we reopen this issue? I saw this issue in two apps recently. I couldn't reproduce the bug so far but it's definitely still happening with the latest versions. |
FWIW, I've experienced this issue and tracked it down to my query asking for a client schema local field that was no longer available. Removing the reference to that local field fixed the issue. For example, I'd have a query such as this: {
query Thread() {
thread {
messages {
context {
... on Event {
id
state
isPast @client
}
}
}
}
} That Hope this helps! |
I just stumbled upon the same issue. I can confirm that it only appears with In my query the roles array objects are query getAreaById($id: uuid!) {
area: areas_by_pk(id: $id) {
id
name
roles {
role { // <== this object in the roles array is undefined
id
type
}
}
}
} |
Seems like this issue is being revived so I thought I would chime in as well. Context: Versions: What I'm querying:
So far I've been able to get my data to render by doing this:
Handling loading and !res.data the same way (since data is undefined by default). However, this is probably not the best way to handle this since res.data could truly be returning undefined. |
Hi, i had same issue. I try to get jwt token from my back with: const LOGIN = gql`
mutation TokenAuth($username: String!, $password: String!) {
tokenAuth(username: $username, password: $password) {
token
payload
refreshExpiresIn
}
}
`;
const [updateLogin, { loading, error }] = useMutation(LOGIN); What i did to solve my problem was use then: updateLogin({ variables: { username:"admin", password:"admin"}}).then((data) => {
console.log(data)
}) it work for me every time. |
Confirmed that adding |
no ID or anything. on react native version 61.5 on ios there is no problem, but on Android, although the URI is https nothing is happening loading becomes true and no error or data. |
The problem was with t android emulator I switched to a real device and the query came back fine with data |
Just upgraded to Apollo 2.0, using react-apollo 2.0.0 -- it now appears that the graphql props option for a query is passed a data argument that can have loading set to false but no data.
That is, given a query, say:
and a
graphql
call:We're seeing the output:
That is, there is an interim state between
loading
having been set to false butmyItem
yet available on thedata
argument.Is this expected, as it appears to differ from the behavior of Apollo 1.0. And if so, what is the reliable way to check that data was loaded and is ready for use in the component?
We're now using
(loading || !myItem)
to check whether something is loading.The text was updated successfully, but these errors were encountered: