From a4fa14decd8d1a76f20f0035518847916c4119fc Mon Sep 17 00:00:00 2001 From: Elliot Evans Date: Fri, 4 Aug 2023 10:53:56 +0100 Subject: [PATCH 1/3] feat(): added react query to docs site --- docs/nx/next/react-query.md | 81 +++++++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 docs/nx/next/react-query.md diff --git a/docs/nx/next/react-query.md b/docs/nx/next/react-query.md new file mode 100644 index 000000000..036b4ad7c --- /dev/null +++ b/docs/nx/next/react-query.md @@ -0,0 +1,81 @@ + +### @ensono-stacks/next:react-query + +
+Add Next Authentication to your next application + +The react-query generator will install and update `_app.tsx` into an existing Next application. It will update the `_app.tsx` file by adding the query provider and update the `.eslintrc` file with the react-query eslint plugin. + + +## Prerequisites + +An existing [Next](https://nextjs.org/) application + +## Usage + +```bash +nx g @ensono-stacks/next:react-query +``` + +### Command line arguments + +The following command line arguments are available: + +| Option | Description | Type | Accepted Values |Default | +| --- | ------------------- | --- | --- | --- | +| --project | The name of the project | nameOfApplication | string | N/A | +| --provider | The provider to be installed | string | none/azureAd |none | + +### Generator Output + +* updates nx.json +* updates apps/demo-01/pages/_app.tsx +* updates apps/demo-01/.eslintrc.json +* updates package.json + +```json title="/package.json" +"dependencies": { + ...otherDependencies + "react-query": "4.32.0", +}, +``` + +```json title=".eslintrc" +"plugins": [ + ...otherPlugins + "@tanstack/eslint-plugin-query", +], +``` + +- Append the `_app.tsx` file with the creation of the query client +- Append the `_app.tsx` file with a query provider + +```typescript title="/apps/appName/_app.tsx" +import { AppProps } from 'next/app'; +import Head from 'next/head'; +import './styles.css'; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; + +const queryClient = new QueryClient() + +function CustomApp({ + Component, + pageProps: { session, ...pageProps }, +}: AppProps) { + return ( + + + Welcome to testing! + +
+ +
+ + ); +} +export default CustomApp; +``` + + +For further information please see the [docs](https://tanstack.com/query/v4/docs/react/overview) +
From 8bf0c75bb79927881de1edcb4a3d66fc06ae22af Mon Sep 17 00:00:00 2001 From: Elliot Evans Date: Mon, 7 Aug 2023 10:23:23 +0100 Subject: [PATCH 2/3] chore(): added tweaks to the React Query docs --- docs/nx/next/plugin-information.md | 1 + docs/nx/next/react-query.md | 14 +++++++++----- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/docs/nx/next/plugin-information.md b/docs/nx/next/plugin-information.md index f46807f20..3d916abc4 100644 --- a/docs/nx/next/plugin-information.md +++ b/docs/nx/next/plugin-information.md @@ -82,3 +82,4 @@ nx g @ensono-stacks/next:[generator-executor-name] --help + \ No newline at end of file diff --git a/docs/nx/next/react-query.md b/docs/nx/next/react-query.md index 036b4ad7c..f2f215468 100644 --- a/docs/nx/next/react-query.md +++ b/docs/nx/next/react-query.md @@ -2,14 +2,14 @@ ### @ensono-stacks/next:react-query
-Add Next Authentication to your next application +Add state management to your next application with React Query -The react-query generator will install and update `_app.tsx` into an existing Next application. It will update the `_app.tsx` file by adding the query provider and update the `.eslintrc` file with the react-query eslint plugin. +The React Query generator updates your existing next application by wrapping the app with [React Query](https://tanstack.com/query/latest/). In addition, the application's linting rules will be updated with the addition of the [ESLint Plugin Query](https://tanstack.com/query/v4/docs/react/eslint/eslint-plugin-query) to enforce best practices when using react-query. ## Prerequisites -An existing [Next](https://nextjs.org/) application +An existing [Next](https://nextjs.org/) Pages Router application ## Usage @@ -47,8 +47,8 @@ The following command line arguments are available: ], ``` -- Append the `_app.tsx` file with the creation of the query client -- Append the `_app.tsx` file with a query provider +- Append the `_app.tsx` file with the creation of the React Query's query client +- Append the `_app.tsx` file with React Query's query client provider ```typescript title="/apps/appName/_app.tsx" import { AppProps } from 'next/app'; @@ -56,6 +56,7 @@ import Head from 'next/head'; import './styles.css'; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +// highlight-next-line const queryClient = new QueryClient() function CustomApp({ @@ -63,6 +64,7 @@ function CustomApp({ pageProps: { session, ...pageProps }, }: AppProps) { return ( + // highlight-next-line Welcome to testing! @@ -70,12 +72,14 @@ function CustomApp({
+ // highlight-next-line ); } export default CustomApp; ``` +_The above is needed in order to use React Query_ For further information please see the [docs](https://tanstack.com/query/v4/docs/react/overview)
From 6c4961357114e282a895d7ce40ccbb351fce6865 Mon Sep 17 00:00:00 2001 From: Elliot Evans Date: Mon, 7 Aug 2023 13:09:24 +0100 Subject: [PATCH 3/3] chore(): added bullet point about react query to init page --- docs/nx/nx_monorepo.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/nx/nx_monorepo.md b/docs/nx/nx_monorepo.md index ffb7a4eb5..468c37428 100644 --- a/docs/nx/nx_monorepo.md +++ b/docs/nx/nx_monorepo.md @@ -147,15 +147,15 @@ Visit the [@ensono-stacks/workspace](./workspace/plugin-information.md) docs for To accelerate your project development and ensure consistency across those projects, we have several stacks plugins available! | Plugin | Description | -| :------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [`@ensono-stacks/create-stacks-workspace`](./create-stacks-workspace/plugin-information.md) | Create an Nx workspace using stacks!
  • Create an Nx workspace for a Next application with your choice of testing framework!
  • Create a testing project for the generated Next application. Supported: Playwright & Cypress
    • | +| :------------------------------------------------------------------------------------------ |:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| [`@ensono-stacks/create-stacks-workspace`](./create-stacks-workspace/plugin-information.md) | Create an Nx workspace using stacks!
  • Create an Nx workspace for a Next application with your choice of testing framework!
  • Create a testing project for the generated Next application. Supported: Playwright & Cypress
    • | | [`@ensono-stacks/workspace`](./workspace/plugin-information.md) | 'Stackify' your existing Nx workspace
  • Add build and deploy infrastructure to your workspace
  • Set up libraries to manage code & commit quality
    • | -| [`@ensono-stacks/next`](./next/plugin-information.md) | Enhance your Next.js project with Stacks!
  • Add stacks configuration and developer tools to an existing next application
  • Add NextAuth.js to your next application
  • Add build and deploy infrastructure to your next application
    • | +| [`@ensono-stacks/next`](./next/plugin-information.md) | Enhance your Next.js project with Stacks!
  • Add stacks configuration and developer tools to an existing next application
  • Add NextAuth.js to your next application
  • Add React Query to your next application
  • Add build and deploy infrastructure to your next application
    • | | [`@ensono-stacks/azure-node`](./azure-node/plugin-information.md) |
  • Add Azure app insights to a node project in your stacks workspace
    • | | `@ensono-stacks/azure-react` |
  • Coming soon!
  • Install and configure a ReactJS library with app insights
    • | | [`@ensono-stacks/rest-client`](./rest-client/plugin-information.md) | Add a rest client to a project in your stacks workspace
  • Create an Axios http-client with custom configuration
  • Create a client endpoint with Axios HTTP methods for your application
  • Bump existing endpoints to new versions
  • Create code implementation from an OpenApi schema using Orval
    • | | [`@ensono-stacks/playwright`](./playwright/plugin-information.md) | Add the playwright testing library and much more to your project!
  • Create a playwright testing project for your application
  • Add accessibility testing to your test project
  • Add native visual testing with playwright
  • Add visual testing with Applitools eyes
  • Add playwright testing and reporting automatically to your build pipelines
    • | -| [`@ensono-stacks/cypress`](./cypress/plugin-information.md) | Add the cypress testing library and much more to your project!
  • Add accessibility testing to your test project
  • Add cypress testing and reporting automatically to your build pipelines
    • | +| [`@ensono-stacks/cypress`](./cypress/plugin-information.md) | Add the cypress testing library and much more to your project!
  • Add accessibility testing to your test project
  • Add cypress testing and reporting automatically to your build pipelines
    • | | [`@ensono-stacks/logger`](./logger/plugin-information.md) | Add industry standard logging capabilities to your project
  • Add Winston to your project
    • | ### Further Notes