caston1981
commented
4 years ago OK I know this code still doesn't work (as the '}' after render and "default app" at the end has the red underline squiggle in visual studio code) but am I at least on the right track?
I noticed I had buildHasuraProvider twice so I commented out the first one. I moved the render and return functions to after the code block we are testing.
I have copied the imports from the "Set up a GraphQL client with Apollo" part of the tutorial but most of them aren't used yet as they are still faded. I added createHttpLink and ApolloLink as I noticed them used in the code block we are testing. They don't fade which is a huge bonus.
// in App.js
import React, { Component } from 'react';
import buildHasuraProvider from 'ra-data-hasura-graphql';
import { Admin, Resource } from 'react-admin';
import { ItemList, ItemEdit, ItemCreate } from './items';
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink, createHttpLink, ApolloLink } from 'apollo-link-http';
import { ApolloProvider } from '@apollo/react-hooks';
class App extends Component {
constructor() {
super();
this.state = { dataProvider: null };
}
/* componentDidMount() {
buildHasuraProvider({
clientOptions: { uri: 'http://hasura:8080/v1/graphql' },
}).then((dataProvider) => this.setState({ dataProvider }));
} */
/* testing this code */
componentDidMount() {
const httpLink = createHttpLink({ uri: 'http://hasura:8080/v1/graphql' });
const middlewareLink = new ApolloLink((operation, forward) => {
operation.setContext({
headers: {
'x-hasura-admin-secret': `myadminsecretkey`,
/* 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),
})
);
/* end test */
render() {
const { dataProvider } = this.state;
if (!dataProvider) {
return <div>Loading</div>;
}
return (
<Admin dataProvider={dataProvider}>
<Resource name="items" list={ItemList} edit={ItemEdit} create={ItemCreate} />
</Admin>
);
}
}
export default App;
webdeb
cpursley
Hello,
I am trying to get up and running with a test RA/Hasura dashboard. I have used a mix of the code in the readme.md and a code snippet example given by webdeb here.
For now instead of bearer I have just enabled the secret key. I don't mind changing this and expect I will need to at some point based on the authentication and security model used by Hasura.
For context here is my full github repo. Here is the code snippet from the App.js in my repo.
Any assistance would be much appreciated and I will pay it forward by helping write documentation for beginners.
I have changed the code-block to:
Please note I haven't tried building it yet because the first '{' after componentDidMount() has red underline squiggle and gives the message: ';' expected. ts(1005)
This is in visual studio code.
If we look at the instructions and example code in the readme.md for "ra-data-hasura-graphql" we have:
Authentication
To send authentication headers, declare your own apollo client.
So I don't know what is meant to be in 'client' so I have referred to the code snippet provided by webdeb. However, that code snippet hasn't actually called ApolloClient and I can tell as the "import" line is still still faded in visual studio code.
gmatht is helping with the project too. @gmatht perhaps these will help us? Set up a GraphQL client with Apollo React componentDidMount