404 error -resource does not exist - code not found

[caston1981]

Hello,

I am using ra-data-hasura-graphsql in my react-admin project. The repo is at: https://github.com/affluent-bilby-classifieds/express-hasura_ra-cb-menu

I haven't setup the admin-secret or the authentication in apollo-boost yet in case that is my issue. It's running on a VM on my LAN behind NAT. I am using the authentication that came with the initial project I forked mine from which uses express-jwt.

I can access the hasura console OK.

However in react-admin I just get the message: Loading...

My issue looks like this (please scroll to the right to see the debug console):

Screenshot

I have tried changing App.js: clientOptions: { uri: 'http://localhost:8080' }, to the IP of the VM. That is the configuration used in the screenshot.

I have also allowed insecure content in Chrome for that IP and port. Any help finding the cause of this issue so I can get this up and running would be much appreciated. I apologize if I have missed anything but I have tried many different data providers to finally up here with ra-data-hasura-graphql so hopefully I will soon have it working. Let me know if there are any other steps you want me to try. Thank you.

headers:

Request URL: http://192.168.1.131:8080/
Request Method: POST
Status Code: 404 Not Found
Remote Address: 192.168.1.131:8080
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,OPTIONS
Access-Control-Allow-Origin: http://192.168.1.131:3000
Content-Type: application/json; charset=utf-8
Date: Wed, 08 Jul 2020 07:14:40 GMT
Server: Warp/3.2.27
Transfer-Encoding: chunked
accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 1922
content-type: application/json
Host: 192.168.1.131:8080
Origin: http://192.168.1.131:3000
Referer: http://192.168.1.131:3000/
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) snap Chromium/83.0.4103.116 Chrome/83.0.4103.116 Safari/537.36
{operationName: "IntrospectionQuery", variables: {},…}
operationName: "IntrospectionQuery"
query: "query IntrospectionQuery {↵  __schema {↵    queryType {↵      name↵      __typename↵    }↵    mutationType {↵      name↵      __typename↵    }↵    subscriptionType {↵      name↵      __typename↵    }↵    types {↵      ...FullType↵      __typename↵    }↵    directives {↵      name↵      description↵      locations↵      args {↵        ...InputValue↵        __typename↵      }↵      __typename↵    }↵    __typename↵  }↵}↵↵fragment FullType on __Type {↵  kind↵  name↵  description↵  fields(includeDeprecated: true) {↵    name↵    description↵    args {↵      ...InputValue↵      __typename↵    }↵    type {↵      ...TypeRef↵      __typename↵    }↵    isDeprecated↵    deprecationReason↵    __typename↵  }↵  inputFields {↵    ...InputValue↵    __typename↵  }↵  interfaces {↵    ...TypeRef↵    __typename↵  }↵  enumValues(includeDeprecated: true) {↵    name↵    description↵    isDeprecated↵    deprecationReason↵    __typename↵  }↵  possibleTypes {↵    ...TypeRef↵    __typename↵  }↵  __typename↵}↵↵fragment InputValue on __InputValue {↵  name↵  description↵  type {↵    ...TypeRef↵    __typename↵  }↵  defaultValue↵  __typename↵}↵↵fragment TypeRef on __Type {↵  kind↵  name↵  ofType {↵    kind↵    name↵    ofType {↵      kind↵      name↵      ofType {↵        kind↵        name↵        ofType {↵          kind↵          name↵          ofType {↵            kind↵            name↵            ofType {↵              kind↵              name↵              ofType {↵                kind↵                name↵                __typename↵              }↵              __typename↵            }↵            __typename↵          }↵          __typename↵        }↵        __typename↵      }↵      __typename↵    }↵    __typename↵  }↵  __typename↵}↵"
variables: {}

preview:

{path: "$", error: "resource does not exist", code: "not-found"}
code: "not-found"
error: "resource does not exist"
path: "$"

response:

{"path":"$","error":"resource does not exist","code":"not-found"}

[webdeb]

{"path":"$","error":"resource does not exist","code":"not-found"}

could mean, that your current user is not authorised to do anything on the resource.

[caston1981]

webdeb that's a good point. I could enable verbose logging for pg. Should I add: command: ["postgres", "-c", "log_statement=all"] to my docker-compose file?

If you mean the user from the express-jwt based auth I usually login once the react-admin page is up. As it only showed "Loading" I couldn't get that far.

[webdeb]

I guess you only have to set the right auth headers in your react-admin app

Something like this:

  componentDidMount() {
    const httpLink = createHttpLink({ uri: process.env.REACT_APP_GRAPHQL_URI });
    const middlewareLink = new ApolloLink((operation, forward) => {
      operation.setContext({
        headers: {
          Authorization: "Bearer " + yourToken, // <--- SET THE TOKEN
        },
      });
      return forward(operation);
    });

    // use with apollo-client
    const link = middlewareLink.concat(httpLink);

    buildHasuraProvider({
      clientOptions: { link: link },
    }).then((dataProvider) =>
      this.setState({
        dataProvider: enhanceDataProvider(dataProvider),
      })
    );

[caston1981]

This gives me a lead to follow. Thanks webdeb. Is this similar to the section "Authentication" (where it says To send authentication headers, declare your own apollo client.) on the readme.md file?

[webdeb]

Is this similar to the section "Authentication" (where it says To send authentication headers, declare your own apollo client.) on the readme.md file?

its exactly this

[dknight10]

Maybe you're missing the complete URL? I got this error when trying the base http://localhost:8080 but noticed that my Hasura endpoint was actually http://localhost:8080/v1/graphql

[caston1981]

Hi dknight10,

Thanks for the suggestion. I tried that. It seems to get further but still fails. I should probably continue with webdebs suggestion.

If you can suggest anything I can try in the console or cli that would help too.

The other thing is that my project uses nginx as a reverse proxy and I got the configuration from a project I forked. I haven't modified the nginx-front.conf file. Does it require changes to allow Hasura to work?

I am about to try:

location /v1/graphql {
        proxy_pass http://hasura:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

[caston1981]

I tried the nginx configuration above.

I am back to the "Loading" message so no react-admin screen. Having said that no 404 errors in the console either. However in the console I get:

index.js:16713 Uncaught (in promise) TypeError: Cannot read property 'name' of null
    at index.js:16713
    at Array.reduce (<anonymous>)
    at index.js:16712
    at index.js:16526
    at Object.next (index.js:16539)
    at a (index.js:16427)

[caston1981]

Is there another example implementation I can learn from?

The App.tsx file in react-admin-low-code is quite different to the App.js in my project

I can see the uri is defined in get-app.tsx but my project uses js. Additionally I need to see an implementation of Authorization so I can learn what I need to know to follow webdeb's advice.

I guess I could look at hasura-typescript-boilerplate but that's in typescript with a next js and tailwind back-end. I hadn't heard of tailwind before but it looks like an alternative of Bulma. Are there any pure js examples or has everyone gone to ts now?

I just went to check there wasn't any TS in my project. It says:

Languages

JavaScript 71.3% TSQL 12.8% Shell 7.4% HTML 6.3% CSS 2.2%

Of course some of the dependencies and libraries it pulls could be in TS but I don't work with those myself.

ra-data-hasura-graphql says: JavaScript 100.0% which is why it starts getting confusing for me when I see the example implementations in TS.

The other thing I am thinking of trying it going up a version or two as I am currently using the docker image for graphql-engine:v1.0.0-beta.6. OK I did that but it didn't make any difference.

I found the auth code for the hasura-typescript-boilerplate in auth.ts

I saw the "<--- SET THE TOKEN" comment thanks webdeb. I'm sure it's quite simple once I have figured this out. I will make sure I document what I needed to do on my projects readme.md file.

Additionally I will read the docs.

Both the example webdeb has given me and the readme.md for this project "ra-data-hasura-graphql" refer to "Bearer":

    // 'Authorization': `Bearer xxxx`,

 Authorization: "Bearer " + yourToken, // <--- SET THE TOKEN

It doesn't mention "Bearer" in the hasura-typescript-boilerplate auth.ts file but it does have things like: XHasuraRole, HASURA_ROLE_ANONYMOUS, XHasuraUserID, HASURA_ROLE_ADMIN

Is "Bearer" something related to this?

Additionally can I just put this code in the App.js file or am I supposed to put it in it's own auth file like the one called auth.ts in asura-typescript-boilerplate and call it? Sorry I am used to following very step by step tutorials often with accompanying video. Maybe that can be how I pay it forward after this by making such a tutorial for beginners.

[webdeb]

@affluent-bilby-classifieds To start simple, I would try to run a basic hasura installation, maybe just spin up an official heroku deployment for free.

---

"Bearer" is part of the OAuth2.0 Authorization Scheme. Just search for it, if you need more information. "Bearer JWT" should give you enough posts about this.

Btw, here the Bearer is inside constants: https://github.com/hgiasac/hasura-typescript-boilerplate/blob/cccda173c9ce471bc57315f569d455ead5d6ec91/services/auth/src/shared/types.ts#L7

[caston1981]

Thank you webdeb. Those are great ideas. You have given me enough information for me to continue working so I will close this ticket now. I feel more confident this morning so I wish to thank you sincerely.