Usage

The useQuery hook allows you to turn your GraphQL queries into custom hooks. This functions similarly to the popular GraphQL library Apollo. useQuery helps keep your API logic in line with React methodology and best practices.

Getting started

First, create your GQL query file. The example below queries for a person and is named GetPerson.gql

query Person($personId: ID!) {
  person(msid: $personId) {
    name
    email
    company
    location
  }
}

Next, insert the following code in the index.js

export { usePersonSearch } from './usePersonSearch';

Then create a custom hook for your query. This example is named usePersonSearch.js

import { useQuery } from '@uhg-abyss/web/hooks/useQuery';
import GetPerson from './GetPerson.gql';

export const usePersonSearch = (options) => {
  return useQuery(GetPerson, {
    ...options,
    url: '/api/graphql',
    accessor: 'person',
    initialState: {
      name: '',
      email: '',
      company: '',
      location: '',
    },
  });
};

Now, you can call the query from within your application. This example uses a submit button and search box to run the query search. This example component is named QueryPage.jsx

import React, { useState } from 'react';
import { Button } from '@uhg-abyss/web/ui/Button';
import { TextInput } from '@uhg-abyss/web/ui/TextInput';
import { usePersonSearch } from '@src/hooks/usePersonSearch';

export const QueryPage = () => {
  const [searchValue, setSearchValue] = useState();
  const [personSearchResult, getPersonSearch] = usePersonSearch();
  const { person } = personSearchResult.data;

  const handleSearch = () => {
    getPersonSearch({
      variables: {
        personId: searchValue,
      },
    });
  };

  const handleChange = (e) => {
    setSearchValue(e.target.value);
  };

  return (
    <React.Fragment>
      <TextInput
        label="Search MSID"
        value={searchValue}
        onChange={handleChange}
      />
      <Button onClick={handleSearch}>Search</Button>
      <ul>
        <li>Name: {person?.name}</li>
        <li>Email: {person?.email}</li>
        <li>Company: {person?.company}</li>
        <li>Location: {person?.location}</li>
      </ul>
    </React.Fragment>
  );
};

Query provider

Wrap your code in the QueryProvider to access all calls made from components within the provider

import { QueryProvider } from '@uhg-abyss/web/ui/QueryProvider';

export const ReactComponentWithQueryProvider = ({ ...props }) => {
  return <QueryProvider>{/* all components you wish to wrap */}</QueryProvider>;
};

Access query data through QueryContext. The queryState property will contain your data categorized by GQL query name.

import React, { useContext } from 'react';
import { QueryContext } from '@uhg-abyss/web/hooks/useQuery';

export const ComponentToReadQueryProvider = ({ ...props }) => {
  const queryContext = useContext(QueryContext);

  return (
    <React.Fragment>
      {
        queryContext?.queryState?.['nameOfYourQuery']?.data?.[
          'propertyYouWishToAccess'
        ]
      }
    </React.Fragment>
  );
};

Option arguments

Below is a list of available option arguments and their uses.

const options = {
  url: 'example/api/graphql', // URL endpoint
  requestPolicy: 'no-cache' // set to 'no-cache' to disable data cache
  headers:{
    "Content-Type": 'application/json',
    "Authorization": "bearer_token_here"
  }, // header object
  initialState: {} // object that holds the initial state of data being queried
  onCalled: console.log('onCalled'), // function that runs when request is called
  onCompleted: console.log('onCompleted'), // function that runs when request is completed
  onError: console.log('onError'), // function that runs when request fails
  onCache: console.log('onCache'), // function that runs when data is cached
  clearCache: [''], // array of keys to clear from cache
}