Skip to content

Commit 49cd38f

Browse files
committed
Improve client configuration to make it more flexible. Better useSyncGQLQuery documentation.
1 parent 1afd830 commit 49cd38f

File tree

3 files changed

+28
-6
lines changed

3 files changed

+28
-6
lines changed

reactium_modules/@reactium/graphql/reactium-hooks-graphql-client.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,7 @@ Hook.register(
3030
'@atomic-reactor/reactium-api module is required',
3131
);
3232
Reactium.API.register('GraphQL', {
33-
api: new ApolloClient({
34-
uri: window.graphqlAPI || 'http://localhost:4000/graphql',
35-
...config,
36-
}),
33+
api: new ApolloClient(config),
3734
config,
3835
});
3936
} catch (err) {

reactium_modules/@reactium/graphql/sdk.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,32 @@ import {
2323
* @return {ReactiumSyncState<QueryResult<TData,TVariables>>} The sync state object.
2424
* @see {@link [useLazyQuery](https://www.apollographql.com/docs/react/api/react/hooks/#uselazyquery)} for more information on the useLazyQuery hook from which this hook is derived.
2525
* @see {@link [ReactiumSyncState](https://reactiumcore.github.io/reactium-sdk-core/classes/ReactiumSyncState.html)} to understand the underlying synchronized state object.
26+
* @example
27+
* import { useSyncGQLQuery } from '@reactium/graphql';
28+
* import { gql } from '@apollo/client';
29+
*
30+
* const MY_QUERY = gql`
31+
* query MyQuery($id: ID!) {
32+
* myQuery {
33+
* id
34+
* name
35+
* }
36+
* }
37+
* `;
38+
*
39+
* const MyComponent = () => {
40+
* const state = useSyncGQLQuery(MY_QUERY, { variables: { id: '123' } });
41+
* const { data, loading, error } = state.get();
42+
*
43+
* if (loading) return <div>Loading...</div>;
44+
* return (
45+
* <div>
46+
* {error && <div>Error: {error.message}</div>}
47+
* {data && <div>{data.myQuery.name}</div>}
48+
* <button onClick={() => state.refresh()}>Refresh</button>
49+
* <button onClick={() => state.refresh({ id: '456'})}>Load Id 456</button>
50+
* </div>
51+
* );
2652
*/
2753
export const useSyncGQLQuery = <
2854
TData = any,

src/app/components/Dashboard/Dashboard.jsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,8 @@ export const Dashboard = () => {
2828
const UserList = useHookComponent('UserList');
2929

3030
const handle = useSyncGQLQuery(LOAD_DASHBOARD_DATA, {
31-
variables: { nums: [1, 2, 3, 5] },
31+
variables: { nums: [0, 1] },
3232
});
33-
window.handle = handle;
3433

3534
return (
3635
<Container fluid as='main'>

0 commit comments

Comments
 (0)