Function useSyncQuery

useSyncQuery is a hook that wraps the query hook from Apollo Client, and adds state management and event handling.

See

• useLazyQuery for more information on the useLazyQuery hook from which this hook is derived.
• ReactiumSyncState to understand the underlying synchronized state object.

Example

import { useSyncQuery } from '@reactium/graphql';
import { gql } from '@apollo/client';

const MY_QUERY = gql`
   query MyQuery($id: ID!) {
      myQuery {
        id
       name
     }
  }
`;

const MyComponent = () => {
  const state = useSyncQuery(MY_QUERY, { variables: { id: '123' } });
  const { data, loading, error } = state.get();

 if (loading) return <div>Loading...</div>;
 return (
   <div>
     {error && <div>Error: {error.message}</div>}
     {data && <div>{data.myQuery.name}</div>}
     <button onClick={() => state.refresh()}>Refresh</button>
     <button onClick={() => state.refresh({ id: '456'})}>Load Id 456</button>
   </div>
);
Copy