Build a Collaborative Realtime Todo App Backend Using Hasura GraphQL

Blog Discussions
1

Learn how to build a working real-time backend for a to-do app using Hasura and GraphQL.

Read on :dizzy:

1176Ɨ1056 143 KB

2

Have you tried Hasura and GraphQL before? :eyes:

How was your experience? :question:

Let us know in the comments :speech_balloon:

3

Do you all have a link to the version of the sample app running in the live demo?

Seems like its been updated on the hasura repo so when we git clone it, I am not getting the same results. Thanks.

4

What is the practice using id token vs access token for hasura access?

5

Sorry for the delayed reply. Iā€™ll be investigating this question and will provide you an answer as soon as possible. Thank you for reading our blog and for joining our community!

6

Thank you for reading the blog post and for joining our community!

I apologize for the delayed reply. Let me bring up this question internally and communicate with the Hasura team. I will provide you an answer as soon as possible.

8

I checked with my team and I got an answer for you :slight_smile: The app wasnā€™t created specifically for the blog post. The blog post refers to a sample that Hasura has in their monorepo.

You can checkout out a commit that reflects the state of the app at the time the post was made as follows:

git clone git@github.com:hasura/graphql-engine.git 

cd graphql-engine/community/sample-apps/react-apollo-todo

git checkout f9fc0cc5e30644eaa73dc6507c52f0ebbb82af2e

Thank you for your time. Let me know if this works out well for you!

9

You can use either an ID token or Access token as long as itā€™s a JWT and contains the required Hasura claims. However, when the client is calling an API, you should use an access token. Hereā€™s a document that can further explain this reasoning:

Let me know if you have any further questions, please :slight_smile:

10

In the example While creating view
CREATE OR REPLACE VIEW ā€œpublicā€.ā€œonline_usersā€ AS
SELECT users.name, users.last_seen
FROM users
WHERE (users.last_seen >= (now() - ā€˜00:00:30ā€™::interval));

Getting error

SQL Execution Failed

postgres-error : syntax error at or near ā€œ.ā€

Can you please help.

11

Hey there @kiran!

Iā€™m sure @dan-auth0 will do his best to help you once heā€™s online! Thank you!

12

Howdy, Kiran!

Is this for the client demo app that is provided in the blog post?

13

@dan-auth0: yes this is for the client demo app.

1 Like
14

Thank you, Kiran. I will raise the issue internally. Thatā€™s code thatā€™s owned and controlled by the Hasura team. Iā€™ll see if they can provide an update on this. Did it also fail when checking out the specified commit?

We plan to update this content with our own demo in the future but I donā€™t have an ETA yet. :pray: Please stay tuned.

15

@dan-auth0 Thanks for the responseā€¦

16

Weā€™ll let you know @kiran once we have it!

17

Iā€™ve spun up the tutorial but after logging in, Iā€™m seeing SameSite warnings:

A cookie associated with a cross-site resource at http://auth0.com/ was set without the `SameSite` attribute. It has been blocked...

When I refresh the page, it seems to lose my log-in (because no cookie?) and displays errors:

Uncaught (in promise) Error: GraphQL error: Missing Authorization header in JWT authentication mode
at new ApolloError (bundle.esm.js:63)...

Any attempt to then add a Todo item results in a JS alert (ā€˜Something went wrongā€™).

Iā€™m running the f9fc branch (git checkout f9fc0cc5e30644eaa73dc6507c52f0ebbb82af2e) although I did try pulling tag v1.2.2 in case it has been patched.

@dan-auth0 Any news on your ā€˜own demoā€™ that you mentioned a couple of months back please? Iā€™m evaluating Hasura and Iā€™d really like to get a React sample running before committing my project to it.

1 Like
18

Hello, Alex. Welcome to the Auth0 Community :slight_smile:

Let me reach out to check on the status of that, please :pray:

Let me also raise the issue you are reporting internally.

1 Like
19

Hey @dan-auth0 . Could I please get an update on this please? Itā€™s on the critical path for my project and Iā€™ve been stalled for 2 weeks. A working sample would really help me out. Cheers.

1 Like
20

Alex, apologies for the delay. The content is in progress. From the update I just saw, the authorization part is in the last stage of review. I am confirming if weā€™ll have a sample that integrates with React ready with it.

2 Likes
21

Hi @dan-auth0,
Any news with the ā€œError: GraphQL error: Missing Authorization header in JWT authentication modeā€ issue? Experiencing the same behaviour.
Thanks!

1 Like