-
Notifications
You must be signed in to change notification settings - Fork 580
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: use Apollo client for all GraphQL API operations (#3020)
- Loading branch information
Showing
5 changed files
with
195 additions
and
137 deletions.
There are no files selected for viewing
171 changes: 99 additions & 72 deletions
171
packages/app-form-builder/src/page-builder/admin/plugins/components/PeFormElement.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,84 +1,111 @@ | ||
| import React from "react"; | ||
| import React, { useMemo } from "react"; | ||
| import { FbFormLayoutPlugin } from "~/plugins"; | ||
| import { createForm } from "@webiny/app-page-builder-elements/renderers/form"; | ||
| import { | ||
| createGetFormDataLoader, | ||
| createSubmitFormDataLoader, | ||
| createLogFormViewDataLoader | ||
| } from "@webiny/app-page-builder-elements/renderers/form/dataLoaders"; | ||
| import { createForm, FormRenderer } from "@webiny/app-page-builder-elements/renderers/form"; | ||
| import { plugins } from "@webiny/plugins"; | ||
| import { getTenantId } from "~/utils/getTenantId"; | ||
| import { FbFormFieldValidatorPlugin, FbFormTriggerHandlerPlugin } from "~/types"; | ||
| import { BeforeFormRender } from "~/page-builder/components/BeforeFormRender"; | ||
| import { useApolloClient } from "@apollo/react-hooks"; | ||
| import gql from "graphql-tag"; | ||
| import { | ||
| CREATE_FORM_SUBMISSION, | ||
| GET_PUBLISHED_FORM, | ||
| LOG_FORM_VIEW | ||
| } from "@webiny/app-page-builder-elements/renderers/form/dataLoaders/graphql"; | ||
|
|
||
| const dataLoadersConfig = { | ||
| apiUrl: process.env.REACT_APP_API_URL + "/graphql", | ||
| includeHeaders: { | ||
| "x-tenant": getTenantId() | ||
| } | ||
| }; | ||
| const PeForm: FormRenderer = props => { | ||
| // We wrap the original renderer in order to be able to provide the Apollo client. | ||
| const apolloClient = useApolloClient(); | ||
|
|
||
| const PeForm = createForm({ | ||
| // We don't need form submissions and logging when previewing forms in the editor. | ||
| preview: true, | ||
| dataLoaders: { | ||
| getForm: createGetFormDataLoader(dataLoadersConfig), | ||
| submitForm: createSubmitFormDataLoader(dataLoadersConfig), | ||
| logFormView: createLogFormViewDataLoader(dataLoadersConfig) | ||
| }, | ||
| formLayoutComponents: () => { | ||
| const registeredPlugins = plugins.byType<FbFormLayoutPlugin>(FbFormLayoutPlugin.type); | ||
| const Renderer = useMemo(() => { | ||
| return createForm({ | ||
| preview: true, | ||
| dataLoaders: { | ||
| // When fetching form, we want to use the default Apollo client. We want to | ||
| // ensure the data gets cached during page prerendering. Using a | ||
| // default `getForm` data loader would not give us that option. | ||
| getForm: ({ variables }) => { | ||
| try { | ||
| const data = apolloClient.readQuery({ | ||
| query: gql(GET_PUBLISHED_FORM), | ||
| variables | ||
| }); | ||
|
|
||
| return registeredPlugins.map(plugin => { | ||
| return { | ||
| id: plugin.layout.name, | ||
| name: plugin.layout.title, | ||
| component: plugin.layout.component | ||
| }; | ||
| }); | ||
| }, | ||
| fieldValidators: () => { | ||
| const registeredPlugins = | ||
| plugins.byType<FbFormFieldValidatorPlugin>("fb-form-field-validator"); | ||
| return data.formBuilder.getPublishedForm.data; | ||
| } catch { | ||
| return apolloClient | ||
| .query({ query: gql(GET_PUBLISHED_FORM), variables }) | ||
| .then(({ data }) => data.formBuilder.getPublishedForm.data); | ||
| } | ||
| }, | ||
| submitForm: ({ variables }) => { | ||
| return apolloClient | ||
| .query({ query: gql(CREATE_FORM_SUBMISSION), variables }) | ||
| .then(({ data }) => data.formBuilder.createFormSubmission.data); | ||
| }, | ||
| logFormView: ({ variables }) => { | ||
| return apolloClient | ||
| .query({ query: gql(LOG_FORM_VIEW), variables }) | ||
| .then(({ data }) => data.formBuilder.createFormSubmission.data); | ||
| } | ||
| }, | ||
| formLayoutComponents: () => { | ||
| const registeredPlugins = plugins.byType<FbFormLayoutPlugin>("form-layout"); | ||
|
|
||
| return registeredPlugins.map(plugin => { | ||
| return { | ||
| id: plugin.validator.name, | ||
| name: plugin.validator.name, | ||
| validate: plugin.validator.validate | ||
| }; | ||
| }); | ||
| }, | ||
| triggers: () => { | ||
| const registeredPlugins = | ||
| plugins.byType<FbFormTriggerHandlerPlugin>("form-trigger-handler"); | ||
| return registeredPlugins.map(plugin => { | ||
| return { | ||
| id: plugin.layout.name, | ||
| name: plugin.layout.title, | ||
| component: plugin.layout.component | ||
| }; | ||
| }); | ||
| }, | ||
| fieldValidators: () => { | ||
| const registeredPlugins = | ||
| plugins.byType<FbFormFieldValidatorPlugin>("fb-form-field-validator"); | ||
|
|
||
| return registeredPlugins.map(plugin => { | ||
| return { | ||
| id: plugin.validator.name, | ||
| name: plugin.validator.name, | ||
| validate: plugin.validator.validate | ||
| }; | ||
| }); | ||
| }, | ||
| triggers: () => { | ||
| const registeredPlugins = | ||
| plugins.byType<FbFormTriggerHandlerPlugin>("form-trigger-handler"); | ||
|
|
||
| return registeredPlugins.map(plugin => { | ||
| return { | ||
| id: plugin.trigger.id, | ||
| name: plugin.trigger.id, | ||
| handle: plugin.trigger.handle | ||
| }; | ||
| return registeredPlugins.map(plugin => { | ||
| return { | ||
| id: plugin.trigger.id, | ||
| name: plugin.trigger.id, | ||
| handle: plugin.trigger.handle | ||
| }; | ||
| }); | ||
| }, | ||
| renderFormNotSelected: () => { | ||
| return ( | ||
| <BeforeFormRender | ||
| border={false} | ||
| message={ | ||
| <> | ||
| Please select a form you wish to display via the <b>Element</b> | ||
| tab in the right sidebar. | ||
| </> | ||
| } | ||
| /> | ||
| ); | ||
| }, | ||
| renderFormLoading: () => { | ||
| return <BeforeFormRender message={"Loading form..."} border={false} />; | ||
| }, | ||
| renderFormNotFound: () => { | ||
| return <BeforeFormRender message={"Form not found."} border={false} />; | ||
| } | ||
| }); | ||
| }, | ||
| renderFormNotSelected: () => { | ||
| return ( | ||
| <BeforeFormRender | ||
| message={ | ||
| <> | ||
| Please select a form you wish to display via the <b>Element</b> | ||
| tab in the right sidebar. | ||
| </> | ||
| } | ||
| /> | ||
| ); | ||
| }, | ||
| renderFormLoading: () => { | ||
| return <BeforeFormRender message={"Loading form..."} />; | ||
| }, | ||
| renderFormNotFound: () => { | ||
| return <BeforeFormRender message={"Form not found."} />; | ||
| } | ||
| }); | ||
| }, []); | ||
|
|
||
| return <Renderer {...props} />; | ||
| }; | ||
|
|
||
| export default PeForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 35 additions & 22 deletions
57
packages/app-page-builder/src/editor/plugins/elements/pagesList/PePagesList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,42 @@ | ||
| import { PbPageElementPagesListComponentPlugin } from "~/types"; | ||
| import { createPagesList } from "@webiny/app-page-builder-elements/renderers/pagesList"; | ||
| import { createDefaultDataLoader } from "@webiny/app-page-builder-elements/renderers/pagesList/dataLoaders"; | ||
| import { | ||
| createPagesList, | ||
| PagesListRenderer | ||
| } from "@webiny/app-page-builder-elements/renderers/pagesList"; | ||
| import React, { useMemo } from "react"; | ||
| import { plugins } from "@webiny/plugins"; | ||
| import { getTenantId } from "~/utils"; | ||
| import { useApolloClient } from "@apollo/react-hooks"; | ||
| import gql from "graphql-tag"; | ||
| import { LIST_PUBLISHED_PAGES } from "@webiny/app-page-builder-elements/renderers/pagesList/dataLoaders/defaultDataLoader"; | ||
|
|
||
| const PePagesList = createPagesList({ | ||
| dataLoader: createDefaultDataLoader({ | ||
| apiUrl: process.env.REACT_APP_API_URL + "/graphql", | ||
| includeHeaders: { | ||
| "x-tenant": getTenantId() | ||
| } | ||
| }), | ||
| pagesListComponents: () => { | ||
| const registeredPlugins = plugins.byType<PbPageElementPagesListComponentPlugin>( | ||
| "pb-page-element-pages-list-component" | ||
| ); | ||
| const PePagesList: PagesListRenderer = props => { | ||
| // We wrap the original renderer in order to be able to provide the Apollo client. | ||
| const apolloClient = useApolloClient(); | ||
|
|
||
| return registeredPlugins.map(plugin => { | ||
| return { | ||
| id: plugin.componentName, | ||
| name: plugin.title, | ||
| component: plugin.component | ||
| }; | ||
| const Renderer = useMemo(() => { | ||
| return createPagesList({ | ||
| dataLoader: ({ variables }) => { | ||
| return apolloClient | ||
| .query({ query: gql(LIST_PUBLISHED_PAGES), variables }) | ||
| .then(({ data }) => data.pageBuilder.listPublishedPages); | ||
| }, | ||
| pagesListComponents: () => { | ||
| const registeredPlugins = plugins.byType<PbPageElementPagesListComponentPlugin>( | ||
| "pb-page-element-pages-list-component" | ||
| ); | ||
|
|
||
| return registeredPlugins.map(plugin => { | ||
| return { | ||
| id: plugin.componentName, | ||
| name: plugin.title, | ||
| component: plugin.component | ||
| }; | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
| }, []); | ||
|
|
||
| return <Renderer {...props} />; | ||
| }; | ||
|
|
||
| export default PePagesList; |
42 changes: 42 additions & 0 deletions
42
packages/app-page-builder/src/render/plugins/elements/pagesList/PePagesList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { PbPageElementPagesListComponentPlugin } from "~/types"; | ||
| import { | ||
| createPagesList, | ||
| PagesListRenderer | ||
| } from "@webiny/app-page-builder-elements/renderers/pagesList"; | ||
| import React, { useMemo } from "react"; | ||
| import { plugins } from "@webiny/plugins"; | ||
| import { useApolloClient } from "@apollo/react-hooks"; | ||
| import gql from "graphql-tag"; | ||
| import { LIST_PUBLISHED_PAGES } from "@webiny/app-page-builder-elements/renderers/pagesList/dataLoaders/defaultDataLoader"; | ||
|
|
||
| const PePagesList: PagesListRenderer = props => { | ||
| // We wrap the original renderer in order to be able to provide the Apollo client. | ||
| const apolloClient = useApolloClient(); | ||
|
|
||
| const Renderer = useMemo(() => { | ||
| return createPagesList({ | ||
| dataLoader: ({ variables }) => { | ||
| return apolloClient | ||
| .query({ query: gql(LIST_PUBLISHED_PAGES), variables }) | ||
| .then(({ data }) => data.pageBuilder.listPublishedPages); | ||
| }, | ||
| pagesListComponents: () => { | ||
| const registeredPlugins = plugins.byType<PbPageElementPagesListComponentPlugin>( | ||
| "pb-page-element-pages-list-component" | ||
| ); | ||
|
|
||
| return registeredPlugins.map(plugin => { | ||
| return { | ||
| id: plugin.componentName, | ||
| name: plugin.title, | ||
| component: plugin.component | ||
| }; | ||
| }); | ||
| } | ||
| }); | ||
| }, []); | ||
|
|
||
| return <Renderer {...props} />; | ||
| }; | ||
|
|
||
| export default PePagesList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters