Getting started
Fabrix is designed to work with React applications, so you’ll need to set up a React app using create-react-app or a similar tool before getting started.
Install fabrix
To start using fabrix, simply install it from npm:
npm install --save @fabrix-framework/fabrix
pnpm install --save @fabrix-framework/fabrix
yarn add --save @fabrix-framework/fabrix
Install component package
In this quick start, we will use fabrix with our chakra-ui package.
npm install --save @fabrix-framework/chakra-ui
pnpm install --save @fabrix-framework/chakra-ui
yarn add --save @fabrix-framework/chakra-ui
Add provider
Add FabrixProvider
that configures fabrix in your app.
import { FabrixProvider } from "@fabrix-framework/fabrix";import { ChakraUIRegistry } from "@fabrix-framework/chakra-ui";
const Providers = (props: React.PropsWithChildren) => <FabrixProvider url={"http://localhost:3000/graphql"} componentRegistry={ChakraUIRegistry} > {props.children} </FabrixProvider>
The url
prop specifies the endpoint of your GraphQL server. This is the URL where Fabrix will send queries and mutations to interact with your backend. It should point to your GraphQL server’s endpoint.
In this example, http://localhost:3000/graphql
is the URL where your GraphQL server is running. Replace this with the appropriate URL for your server.
The componentRegistry
prop defines which components Fabrix should use to render different fields and data types. It acts as a mapping between GraphQL types and React components. Fabrix includes a default component registry, such as Chakra UI components, but you can also provide your own custom registry. See Component registry for more detail.
All set! Now you can start using Fabrix in your app.