React Graphql

Hxb-react-graphql

Get Started

• Refer React with apollo graphql

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

-Link example Hexabase React Graphql github:

Example: Hexabase React Graphql