Vite + TS + React + Tailwind Graphql + Boilerplate

Node Engine

If you are using nvm, run nvm use to use the correct node version.
If you are not using nvm, make sure you are using node version v16.17.1. You can check your node version by running node -v.

Installation

Run yarn install to install all the dependencies.

Running the app

Run yarn start to start the app in development mode.
Open http://localhost:3000 to view it in the browser.

Running the app in production mode

Run yarn build to build the app for production.
Run yarn preview to serve the app in production mode.
Open http://localhost:8080 to view it in the browser.

Running the app in docker

Run docker build -t vite-ts-react-app . to build the docker image.
Run docker run -p 3000:3000 vite-ts-react-app to run the docker image.
Open http://localhost:3000 to view it in the browser.

Running the app in docker-compose

Run docker-compose up to run the docker image.
Open http://localhost:3000 to view it in the browser.

Running the app in docker-compose in production mode

Run export ENV=prod && docker compose up to run the docker image.
Run with tag export ENV=prod TAG=1.0 && docker compose up to run the docker image.
Open http://localhost:8080 to view it in the browser.

Generate the code coverage report

Run yarn test:coverage to generate the code coverage report.

Running the tests

Run yarn test to run the tests.

Running the tests in watch mode

Run yarn test:watch to run the tests in watch mode.

Generate GraphQL types

Run yarn codegen to generate the GraphQL types.

Generate GraphQL types in watch mode

Run yarn codegen:watch to generate the GraphQL types in watch mode.

Committing the code

Run yarn commit to commit the code.

Re-Usable Components

QueryFetchTemplate - The QueryFetchTemplate component is used to handle render the loading, error and no data states for a query fetcher.

Example 1: Benefit of using with loadingContent props is we don't need to worry about handle the null/undefined check for the data.

const NoDataContent = () => <div>No Data</div>;

const LoadingContent = () => <div>Loading...</div>;

const DataContent = ({ listItems }: { listItems: any[] }) => (
  <div>
    {listItems.map(item => (
      <div key={item.id}>{item.name}</div>
    ))}
  </div>
);

const ExampleComponent = () => {
  const { loading, data, error } = useGraphQLQuery(graphqlQuery, {
    id: '1',
  });

  return (
    <QueryFetchTemplate
      loading={loading}
      error={error}
      data={data}
      noDataContent={<NoDataContent />}
      loadingContent={<LoadingContent />}
    >
      {({ data }) => <DataContent listItems={data} />}
    </QueryFetchTemplate>
  );
};

Example 2: Benefit of using without loadingContent props is we can pass isLoading value to all the children components while loading for the data.

const NoDataContent = () => <div>No Data</div>;

const Child1 = ({ isLoading, listItems }) => (isLoading ? <div>Loading..</div> : <div>{listItems[0]}</div>);
const Child2 = ({ isLoading, listItems }) => (isLoading ? <div>Loading..</div> : <div>{listItems[1]}</div>);

const DataContent = ({ isLoading, listItems }: { isLoading: boolean; listItems: any[] }) => (
  <div>
    <Child1 isLoading={isLoading} listItems={listItems} />
    <Child2 isLoading={isLoading} listItems={listItems} />
  </div>
);

const ExampleComponent = () => {
  const { loading, data, error } = useGraphQLQuery(graphqlQuery, {
    id: '1',
  });
  return (
    <QueryFetchTemplate loading={loading} error={error} data={data} noDataContent={<NoDataContent />}>
      {({ data, isLoading }) => <DataContent isLoading={isLoading} listItems={data} />}
    </QueryFetchTemplate>
  );
};

paalamugan / vite-ts-react-tailwind-graphql-boilerplate Goto Github PK

vite-ts-react-tailwind-graphql-boilerplate's Introduction