New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Mutations fail using aws-appsync with @apollo/react-hooks 3.0.0 #450
Comments
Just ran into this after spending 2 days migrating to the new version, a fix or workaround would be much appreciated as this is preventing us from updating our production app. |
@bduff9 We had the same situation! |
Not to stir the pot, but seeing as how we need to decide on a solution within the next 24 hours, we are deciding if we want to revert 2 days of work and just eat that time, or replace appsync sdk with plain apollo client. Seeing as how we're not using the react appsync package at all, the biggest thing would be what we would be giving up if we did. Most offline things seem to be able to be handled with relative ease with other packages, and we can handle auth manually. Does anyone know what else we might be giving up by removing this dependency from our react app to get around this issue? EDIT: Nevermind, I see now that appsync uses MQTT instead of the websockets that apollo supports. Guess we'll need to start reverting all changes. |
Support for @apollo/react-hooks 3.0.1 or greater would be greatly appreciated as the hooks simplify a lot of boiler plate code. Is there any ETA on when this will be supported? |
I also have this problem. It's quite disappointing to see it failing even though react-apollo v3 was in public beta for about two months now... |
I wonder if there's any ETA for solution of this issue? |
here is my temporary solution, switching to import { Auth } from "aws-amplify"
import { createAppSyncLink } from "aws-appsync"
import awsconfig from './aws-exports'
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
const httpLink = createHttpLink({
uri: awsconfig.aws_appsync_graphqlEndpoint,
});
const awsLink = createAppSyncLink({
url: awsconfig.aws_appsync_graphqlEndpoint,
region: awsconfig.aws_appsync_region,
auth: {
type: awsconfig.aws_appsync_authenticationType,
credentials: () => Auth.currentCredentials(),
jwtToken: async () =>
(await Auth.currentSession()).getAccessToken().getJwtToken()
},
complexObjectsCredentials: () => Auth.currentCredentials()
})
export default new ApolloClient({
link: awsLink.concat(httpLink),
cache: new InMemoryCache()
}); |
@nc9 Does this work offline? I've got a React Native mobile app and I need the offline capability and ideally a more persistent cache than an InMemoryCache as I don't want to lose mutations that haven't made it to the server yet if the app crashes |
@isocra it should - it is doing what AppSync is building within it's own client class but skipping Rehydrate and the observable there which is causing issues but I haven't tested it
You can build the from the example: const cache = new InMemoryCache({...});
await persistCache({
cache,
storage: AsyncStorage,
})
export default new ApolloClient({
link: awsLink.concat(httpLink),
cache,
}); even with this issue fixed I believe we're going to stick to using AppSync in this way because we've had too many issues with the layer of abstraction ontop of Apollo and benefiting from new releases |
@nc9 Great solution! This saved the day for us. Do you happen to know if there is any additional configuration needed to get this working with subscriptions? |
Temporary hack: Here's step by step: Force appsync to resolve to apollo-client 2.6.3 or greater (2.6.4 works as of this writing). Then run If you're using npm, then you will have to patch the package-lock.json. You can do this with Add in
Delete the entire This will force all the dependencies inside package.json to reference the apollo-client package correctly. And then: |
@nc9 this looks promising - Any chance you could post up how you are using the Client? Do you just import it and pass it to the ApolloProvider from the hooks package like this? |
I am also facing the same problem as @stewartduffy so if anyone finds a solution, please post as I need this rectified urgently!!! |
I know this isn't the best solution ever, but the one I'm using allows me to use AWS AppSync with Instead I use
I hope it helps someone! |
I think for a paid solution like AppSync, should not need so much hacking. I have tried all the above solutions but still facing issues. I am reverting apollo to a compatible version. |
We have now explored this issue further. The reason to use AppSync over just the ApolloClient is if you need the offline capability. We wrote our own Rehydrated and got around the issues there but then when posting a mutation, it got enqueued in redux-offline but never processed. We debugged the flow and found the issues to be in the offline-link created redux-offline effect. AppSync is using a method called We refactored this to the following construct using the same approach as Apollo does in the mutations:
There were a few other minor issues that we have been changing to make the framework work for our specific use case but this is the key one the core framework falls over on. We now have this working nicely with hooks and our adapted version of AppSync for our use case and I just wanted to share in case anyone else are looking to do the same or if this could inspire the core team to update the framework as it is a hinderance for adaptation. |
Has anyone worked out a solution for SSR? I am using AppSync with Next.js. A solution found here https://github.com/dabit3/next-apollo-appsync works with Apollo render props, NOT with hooks, however :-(. Here is how I am trying to initialize
|
@nc9, is this solution supports AppSync's offline and subscription capabilities? |
Hello everyone - I want to reply and assure you that we have not abandoned support of this project. Per my earlier comment, this is a complex process and to be completely transparent there are things in the Apollo library that are out of our control and there have also been breaking changes in Apollo versions which we're trying to account for, which is also why we pinned the version. We've been spending many hours trying to account for this but it's not simple to solve. After putting more thought into this we've got some initial solutions that I hope will unblock many of you. What we've done is packaged two of the "Links" which are part of the SDK - the Auth and Subscription Links - and published them to NPM. This will allow you to include them in the newer Apollo versions if you wish to use the newer features. This does not include the "Offline Link" for offline support which is more complex to solve and we're looking into for the future. Installation of the links:
With is I would then give the following recommendations for choosing your client strategy:
Please let us know if you have any trouble using these links or if there is a scenario which we haven't accounted for here. |
Please give an ETA for this. |
Any Update ? |
@nagad814 @anarerdene there is no ETA for an offline link as described above. As I outlined we are evaluating possibilities for the future. |
@tgjorgoski, I am sorry for not replying earlier. I can confirm that we use a rewritten version of the AppSync client with Apollo 3 offline using the approach described above. We have converted to use the Apollo hooks pattern and it works well in our use case. We have not changed the local state management. I assume @undefobj has referred to when saying that they need full context of the state in the middleware. This compromise works for us at the moment as we use Redux for our AppState. We use the local state management in Apollo for metadata on mutations and it works fine with the current approach. I look forward to see where AWS is heading with this. We are unfortunately very far from the standard code in a fair few areas making a pull request difficult and maybe not a good idea if AWS is working on a solution. @undefobj, I would be happy to collaborate and contribute if you want someone to work with you on these issues. |
@undefobj, I need the offline capability as I'm building a mobile app. Can you confirm which versions of this SDK, Apollo and any others I can safely use that will work well together? Thanks |
@isocra if you require offline per the comments above and the documentation you can use 2.4.6 with the standard client and don't need a link. |
Hi again @undefobj, Here's what I've got currently (plus a bunch of non-relevant other packags), which would you recommend I upgrade/downgrade (I can't see which should be 2.4.6)?
Thanks! |
Hello, I got this working, but unfortunately for logged out users (using cognito pools), queries [that used to work] are perpetually stuck on 'loading', with no data for 'data' or 'error'. I have tried to rerun In the console:
I followed @undefobj writeup.
Any suggestions? |
Hi @undefobj, Is there any sort of roadmap for fixes to this? I've just spent several days trying to upgrade to Expo36 (which includes RN0.61 and React 16.9), but I'm ready to give up as I can't get it working :-( Our constraint is that we need the offline capability for our app plus we need the very neat AppSync feature that allows us to upload images, so, as per your comment above, we're stuck with using apollo-client@2.4.6. But this isn't compatible with React 16.9 as it uses In fact in order to make it work (and to fix an issue where you have pending mutations that include images as Blobs), we've had to create our own versions of AWSAppSyncClient and the store and We seem to be completely stuck! As far as I can tell, it's just NOT possible to use AWS AppSync with offline and image upload capability with RN0.61 and React 16.9. In case it's useful to anyone, here is the set of packages that we've managed to get working together.
|
@undefobj @dabit3 @elorzafe @manueliglesias Any news for this issue? Should we switch to Amplify Datastore (as it is low low low priority in the backlog) or it's still going to be resolved? |
@undefobj Have you guys confirmed that this works with cognito user pools? Here's how I am setting up my client. const config = {
url: awsconfig.aws_appsync_graphqlEndpoint,
region: awsconfig.aws_appsync_region,
auth: {
type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
jwtToken: async () =>
(await Auth.currentSession()).getIdToken().getJwtToken(),
},
disableOffline: true,
};
const link = ApolloLink.from([
createAppSyncLink(config),
createAuthLink(config),
createSubscriptionHandshakeLink(config),
]);
export const client = new ApolloClient({
link,
cache: new InMemoryCache({addTypename: false}),
}); My packages.json: "dependencies": {
"@apollo/client": "^3.0.0-beta.32",
"@apollo/link-ws": "^2.0.0-beta.3",
"apollo-link": "^1.2.13",
"apollo-link-ws": "^1.0.19",
"apollo-utilities": "^1.3.3",
"react-native": "0.61.5",
"subscriptions-transport-ws": "^0.9.16",
"amazon-cognito-identity-js": "^3.2.4"
}, The connection seems to be successful, but nothing happens for the event that I'm subscribing to ( Here is an example of what appears to be a successful connection (passing owner). Here is an example of an intentional bad connection (not passing owner). |
I put together an example application of my own https://github.com/wolfeidau/appsync-apollo-links which demonstrates realtime websocket connections. |
@wolfeidau thanks for this. looks like we are doing the same thing with the exception of authentication modes. edit: I added an additional subscription type @dabit3 @manueliglesias is this a bug? |
@mikedizon - did you ever get this working with @apollo/react-hooks & Cognito User Pools? I'm getting a 401 when I try @wolfeidau example. |
@darrenfurr with user pools I did not. @wolfeidau's example works, but the custom subscription he's using is public edit: thanks for confirming the same behavior. don't want to spend more time chasing ghosts, or questioning my implementation. |
I am working on adding Cognito pool authentication to the example as it is the more common requirement. I am planning to add this using Hopefully that will round it out as a more generally usable sample as well! |
@wolfeidau hopefully that works with Apollo Client. Having to refactor the entire project isn’t an option. I based my design under the assumption that Apollo client was the way to go given the example provided by the contributors. |
My example at https://github.com/wolfeidau/appsync-apollo-links is now includes support for Cognito Pools rather than just API key. Everything is working 👍 which is great! |
@wolfeidau oh my god. the only thing I was missing was |
This was the aim of my complete example, over fragments. Great to hear it has helped! |
For what it's worth these packages worked for me. I'm using the apollo hooks library primarily.
Implementation:
|
@darrenfurr Don't you need to use <Rehydrated> for nothing ? |
@JuanmaMenendez - I'm not sure what you're asking. |
*<Rehydrated> @darrenfurr |
I'm not using Rehydrated because we're |
Hello everyone, I have just published an article on how to set up AWS AppSync with react apollo 3.x, react hooks and offline support. Hope it helps! |
@wolfeidau can you confirm your solution works with complex objects (ie single mutation that adds records to dynamo DB and uploads the file to s3)? |
happy anniversary, thanks to bugs like these I have moved / actively don't recommend Appsync |
@willsamu it turns out that this does not fix the issue in my case since I am not using useMutation or useQuery. I am using import {compose, graphql } from 'react-apollo'; UPDATE import {flowRight as compose} from 'lodash'; |
nice solution!!! thank you bro!!!!!! |
I tried this but ApolloClient Doesn't support MQTT protocol so AWS app sync subscriptions are not working |
I've used the same code in the project but this doesn't seem to work in production. Any configuration that I should follow? Please help. |
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
When performing a mutation whilst online, the promise never resolves, and the mutation just hangs.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
We are starting to use @apollo/react-hooks 3.0.0 since the previous hook library we were using has been deprecated and has a bug. This has a dependency on apollo-client 2.6.3, which is not compatible with aws-appsync.
To fix this, we are forcing resolutions in npm to fix the version across libraries:
The app compiles and runs ok. Queries work fine, but the mutations hang.
To make sure the problem doesn't lie with react-hooks lib, i tried mutating using the client directly:
What is the expected behavior?
Mutations should work as normal
Which versions and which environment (browser, react-native, nodejs) / OS are affected by this issue? Did this work in previous versions?
@apollo/react-hooks 3.0.0
aws-appsync 1.7.2
apollo-client 2.6.3
The text was updated successfully, but these errors were encountered: