0.2.1 • Published 4 years ago

@galaxis/react v0.2.1

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

Galaxis React

npm

React bindings for Galaxis.

Installation

yarn add @galaxis/react

This will also install and expose API of Galaxis Core.

The library is compiled to modern JS, but it should work in all reasonable browsers with the help of properly configured Babel.

Your client environment has to have AbortController. You might need to polyfill it.

You also need a version of React that supports React Hooks.

Public API

⚠ Anything that is not documented here is not considered a part of public API and may change at any time.

ClientProvider

ClientProvider is used to configure and provide a Client instance for the rest of the application.

interface AppProps {
    client: AppClient;
}

const App: FC<AppProps> = ({ client }) => (
    <ClientProvider client={client}>
        <RestOfTheApp />
    </ClientProvider>
);

Arguments

ClientProviderProps
NameTypeDescriptionRequired
clientClientA Client instance that will be used by the application.Yes
preventOnHydrateCompleteCallbooleanBy default, client.onHydrateComplete() will be called in useEffect. It should be fine in most cases, but you can use this option as an escape hatch and call client.onHydrateComplete() manually.No

useClient()

useClient is used to retrieve the Client instance that was passed to the Provider. You can then use it to execute queries and mutations manually, access cache, etc.

const MyComponent: FC = () => {
    const client = useClient();

    const onClick = () => {
        client.fetchQuery(query).then((data) => console.log(data));
    };

    return <button onClick={onClick}>Fetch the query manually</button>;
};

useQuery()

useQuery is a wrapper around managed query.

const MyComponent: FC = () => {
    const { data } = useQuery(query);

    return <div>{data?.value}</div>;
};

Arguments

NameTypeDescriptionRequired
queryQueryA query to process.No

Return value

QueryManagerResult

useMutation()

useMutation is a wrapper around managed mutation.

const MyComponent: FC = () => {
    const { execute } = useMutation(mutation);

    return <button onClick={execute}>Execute the mutation</button>;
};

Arguments

NameTypeDescriptionRequired
mutationMutationA mutation to process.No

Return value

MutationManagerResult

getDataFromTree()

getDataFromTree() is used on the server side to wait for queries to fill the cache with data and errors.

export default async function ssrMiddleware(_: Request, res: Response<unknown>) {
    const client = getClient();

    const app = createElement(App, { client });

    await getDataFromTree(app);

    const galaxisState = client.getCache().extract();

    const html = createElement(Html, { content: renderToString(app), galaxisState });

    res.send(renderToStaticMarkup(html));
}

Arguments

NameTypeDescriptionRequired
treeReactNodeThe application.Yes

Return value

Promise<string>. The promise resolves with the result of renderToStaticMarkup() call.