hasura/learn-graphql

yarn generate not working in tutorial / graphql / typescript-react-apollo

rumihumphrey opened this issue · 3 comments

I'm new to Hasura and enjoying it so far. However I'm a little stuck, was running through the typescript tutorial and can't seem to get past this part:
https://hasura.io/learn/graphql/typescript-react-apollo/codegen/

I seem to have everything set up but when I run
AUTH_TOKEN=xxxxx yarn generate --watch with my token from the GraphQL server, I always seem to get this error
Authentication hook unauthorized this request

It seems to not like my token but I am getting the token from the provided server and not sure what else to try in order to proceed with the tutorial, seems like the configuration of the server changed but I'm not sure what to change on the frontend side.

This issue may have occurred because you tried to double click or select the JWT token seen in the GraphiQL UI and copy it into the command line (see the highlighted text below):

image

However, this is an illusion - what you are seeing is just part of the jwt token. If you were to select and copy this over, you would thus get the Authentication hook unauthorized this request error as seen below:

image

Instead, do this.:

  • I assume you are using Google Chrome (any other browser should have this feature too, but these instructions are specific to Google Chrome)

  • In the tutorial at the step

    Head to GraphiQL to obtain the Authorization token.

    when you do visit GraphiQl, right click in the page and select "Inspect Element". In the window that opens, select the Network tab.

  • Now, in the GraphiQL page, enter any query (or any mutation - anything for that matter, which will trigger the request). In my example, I run this simple query:

    image

  • When I click on Play button, the query is sent and I get a response too. What you need to do is look at the Network tab you opened earlier - here, look for the graphql entry. Click on it. In the right side, details of the request should open up. Under Request Headers, look for the authorization header. Copy the text after Bearer - the entire text. That is the full JWT token:

    image

If you try to use this text in your command, you should no longer see the previous error:

image

Once you continue with the rest of the tutorial, the last error seen above should also go away (the error seen now simply states that it could not find any graphql statements in the code, yet - you will be adding them soon in the next steps and this error too will go away)

Thanks you are probably right about not copying the whole JWT token, I had less understanding of JWT at that point. In my case I got graphql-codegen working in my own project by adding my Hasura admin key to the headers like this:

    schema: [
        {
            'https://hasura.io/learn/graphql': {
                headers: {
                    x-hasura-admin-secret: : process.env.AUTH_ADMIN_KEY,
                },
            },
        },
    ],

"(the error seen now simply states that it could not find any graphql statements in the code, yet " - this is very confusing.

Please move the note about this error close to the command.

You've placed this to the bottom of the page after the message "Once they are added two files will be generated:..."

Doing step by step, I've spent a lot of time discovering why I have errors before I found this small note. :-)