Skip to main content

React Graphql

Hxb-react-graphql

Get Started

Initialize

Create an application React:

  • Using optional yarn package
    yarn create react-app react-graphql-hxb

Install package

-With React:

  • Using optional yarn package
    yarn add @apollo/client graphql img-loader react-router-dom react-dom sass-loader typescript
    yarn add -D @babel/preset-typescript @types/react

Connect react with grahpql through apollo

-With React:

  • In index.js import package @apollo/client:

    import { ApolloClient,
    ApolloProvider,
    createHttpLink,
    InMemoryCache
    } from '@apollo/client';
    import { setContext } from '@apollo/client/link/context';
  • In index.js add authentication and connect to uri api and cache fields:

      const httpLink = createHttpLink({
    uri: 'https://hxb-graph.hexabase.com/graphql',
    });

    const authLink = setContext((_, { headers }) => {
    const token = localStorage.getItem('token');
    return {
    headers: {
    ...headers,
    authorization: token ? `Bearer ${token}` : "",
    }
    }
    });

    const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
    });
  • In index.js wrap react app with ApolloProvider

        ReactDOM.render(
    <ApolloProvider client={client}>
    <App />
    </ApolloProvider>,
    document.getElementById('root'),
    );
    reportWebVitals();

-Example Query/Mutation Graphql with Hexabase

-With React:

  • In App.js clear all and do with follow:

    • import package to do with query and mutation
    import './App.css';
    import {
    useQuery,
    gql,
    useMutation,
    } from "@apollo/client";

    Query: example get workspaces

    • Fetch data with useQueryHook
    • Execute query function with template
    const GET_WORKSPACE = gql`{
    workspaces {
    current_workspace_id
    workspaces {
    workspace_id
    workspace_name
    }
    }
    }`;
    • Function to get all workspaces
    function GetWorkspaces() {
    const { loading, error, data } = useQuery(GET_WORKSPACE);
    if (loading) return <tr><td> Loading...</td></tr>;
    if (error) return <tr><td>Error :(</td></tr>;
    return data.workspaces.workspaces.map((workspace, index) => {
    return (
    <tr key={index}>
    <td>{index}</td>
    <td>{workspace.workspace_id}</td>
    <td>{workspace.workspace_name}</td>
    </tr>
    );
    })
    }
    • Integrate with Component App
    function App() {
    return (
    <div className="App">
    <div className="container">
    <div className="title-query">Query: Get Workspaces</div>
    <table className="table-content">
    <tbody>
    <tr>
    <td>index</td>
    <td>workspace_id</td>
    <td>workspace_name</td>
    </tr>
    <GetWorkspaces></GetWorkspaces>
    </tbody>
    </table>
    </div>
    </div>
    );
    }
    • Finnal: export App component
    export default App;
    • In App.css add style css:
    .title-query {
    font-weight: 24px;
    color: black;
    margin-bottom: 20px;
    margin-top: 10px;
    }

    .title-query {
    font-weight: 24px;
    color: Red;
    margin-bottom: 20px;
    margin-top: 10px;
    }

    .container,
    .table-content {
    margin: 0 auto;
    }

    Mutation: example create a workspace

    • Modify data with the useMutation hook

    • Execute query function with template

      const ADD_WORKSPACE = gql`
      mutation Mutation($createWorkSpaceInput: CreateWorkSpaceInput!) {
      createWorkspace(createWorkSpaceInput: $createWorkSpaceInput) {
      w_id
      }
      }
      `;
    • Function to create a workspace

      function AddWorkspace() {
      let input;
      const [addWorkspace, { data, loading, error }] = useMutation(ADD_WORKSPACE);

      if (loading) return 'Submitting...';
      if (error) return `Submission error! ${error.message}`;

      return (
      <div>
      <form
      onSubmit={e => {
      e.preventDefault();
      addWorkspace({ variables: { createWorkSpaceInput: {
      name: input.value
      }} });
      input.value = '';
      }}
      >
      <input
      placeholder="input new name workspace"
      ref={node => {
      input = node;
      }}
      />
      <button className="button-mutation" type="submit">Add Workspaces</button>
      </form>
      </div>
      );
      }
    • Integrate with Component App

      function App() {
      return (
      <div className="App">
      <div className="container">
      <div className="title-query">Query: Get Workspaces</div>
      <table className="table-content">
      <tbody>
      <tr>
      <td>index</td>
      <td>workspace_id</td>
      <td>workspace_name</td>
      </tr>
      <GetWorkspaces></GetWorkspaces>
      </tbody>
      </table>
      <div className="title-mutation">Mutation: Create Workspaces</div>
      <AddWorkspace></AddWorkspace>
      </div>
      </div>
      );
      }
    • Finnal: export App component

      export default App;
    • In App.css add style css:

      .title-query {
      font-weight: 24px;
      color: black;
      margin-bottom: 20px;
      margin-top: 10px;
      }

      .title-mutation,
      .title-query {
      font-weight: 24px;
      color: Red;
      margin-bottom: 20px;
      margin-top: 10px;
      }

      .button-mutation {
      margin-top: 10px;
      background-color: chocolate;
      margin-left: 10px;
      }

      .container,
      .table-content {
      margin: 0 auto;
      }

-Run project:

  yarn start

Example: Hexabase React Graphql