Skip to content

Commit

Permalink
feat: SB-732, SB-753 Init Apollo migration
Browse files Browse the repository at this point in the history
  • Loading branch information
mkleszcz committed Jan 23, 2023
1 parent 910f467 commit 63ecba2
Show file tree
Hide file tree
Showing 23 changed files with 3,841 additions and 84 deletions.
16 changes: 16 additions & 0 deletions packages/webapp/graphql/codegen/client.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
overwrite: true
ignoreNoDocuments: true
schema:
- ./graphql/schema/schema.graphql:
loader: ./graphql/schema/loader.js
generates:
src/shared/services/graphqlApi/__generated/gql/:
documents: ['src/**/*.ts', 'src/**/*.tsx', '!src/shared/services/**/__generated/*', '!src/**/__generated__/*.graphql.ts']
pluckConfig:
modules:
- name: babel-plugin-relay/macro
identifier: graphql
preset: 'client'
plugins: []
presetConfig:
gqlTagName: 'gql'
7 changes: 5 additions & 2 deletions packages/webapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"start": "nx start:app"
},
"dependencies": {
"@apollo/client": "^3.7.4",
"@graphql-tools/schema": "^9.0.12",
"@graphql-tools/stitch": "^8.7.33",
"@iconify-icons/ion": "^1.2.4",
Expand Down Expand Up @@ -61,8 +62,8 @@
"react-router": "^6.7.0",
"react-router-dom": "^6.7.0",
"redux": "^4.2.0",
"relay-runtime": "^14.0.0",
"regenerator-runtime": "^0.13.11",
"relay-runtime": "^14.0.0",
"semver-compare": "^1.0.0",
"storybook-react-router": "^1.0.8",
"styled-components": "5.3.6",
Expand All @@ -77,20 +78,22 @@
"@formatjs/intl-pluralrules": "^5.1.4",
"@graphql-codegen/add": "^3.2.1",
"@graphql-codegen/cli": "^2.13.11",
"@graphql-codegen/client-preset": "^1.2.6",
"@graphql-codegen/import-types-preset": "^2.2.6",
"@graphql-codegen/typescript": "^2.8.1",
"@graphql-codegen/typescript-graphql-request": "^4.5.8",
"@graphql-codegen/typescript-operations": "^2.5.6",
"@graphql-tools/merge": "^8.3.10",
"@graphql-tools/schema": "^9.0.8",
"@graphql-tools/stitch": "^8.7.19",
"@svgr/webpack": "^6.5.1",
"@graphql-typed-document-node/core": "^3.1.1",
"@storybook/addon-actions": "^6.5.13",
"@storybook/addon-essentials": "^6.5.13",
"@storybook/builder-webpack5": "^6.5.13",
"@storybook/manager-webpack5": "^6.5.13",
"@storybook/preset-create-react-app": "^4.1.2",
"@storybook/react": "^6.5.13",
"@svgr/webpack": "^6.5.1",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
Expand Down
18 changes: 6 additions & 12 deletions packages/webapp/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,6 @@
"command": "cp .env.example .env"
}
},
"relay": {
"executor": "nx:run-commands",
"options": {
"cwd": "packages/webapp",
"color": true,
"command": "node_modules/.bin/relay-compiler"
}
},
"graphql": {
"executor": "nx:run-commands",
"options": {
Expand All @@ -31,7 +23,10 @@
},
"configurations": {
"generate-types": {
"command": "node_modules/.bin/graphql-codegen -c ./graphql/codegen/contentful.yml && yarn graphql-codegen -c graphql/codegen/schemaTypes.yml"
"command": "node_modules/.bin/graphql-codegen -c ./graphql/codegen/contentful.yml && node_modules/.bin/graphql-codegen -c graphql/codegen/schemaTypes.yml && node_modules/.bin/graphql-codegen -c ./graphql/codegen/client.yml"
},
"generate-types:watch": {
"command": "node_modules/.bin/graphql-codegen -w -c ./graphql/codegen/client.yml"
},
"download-schema": {
"command": "/bin/sh ./scripts/download-graphql-schema.sh"
Expand All @@ -45,7 +40,7 @@
"color": true,
"commands": [
"node_modules/.bin/craco start",
"node_modules/.bin/relay-compiler --watch"
"nx run webapp:graphql:generate-types:watch"
]
},
"dependsOn": [
Expand All @@ -68,8 +63,7 @@
}
},
"dependsOn": [
"graphql:generate-types",
"relay"
"graphql:generate-types"
]
},
"build": {
Expand Down
9 changes: 6 additions & 3 deletions packages/webapp/src/app/initApp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { UnsupportedBrowserDetection } from './unsupported/unsupportedBrowserDet
import { SentryProvider } from './providers/sentry';
import { ReduxProvider } from './providers/redux';
import { RelayProvider } from './providers/relay';
import { ApolloProvider } from './providers/apollo';
import { CommonQuery } from './providers/commonQuery';
import { RouterProvider } from './providers/router';

Expand All @@ -24,9 +25,11 @@ const render = () => {
<RouterProvider>
<HelmetProvider>
<RelayProvider>
<CommonQuery>
<App />
</CommonQuery>
<ApolloProvider>
<CommonQuery>
<App />
</CommonQuery>
</ApolloProvider>
</RelayProvider>
</HelmetProvider>
</RouterProvider>
Expand Down
8 changes: 8 additions & 0 deletions packages/webapp/src/app/providers/apollo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { ReactNode } from 'react';
import { ApolloProvider as Provider } from '@apollo/client';

import { client } from '../../shared/services/graphqlApi/apolloClient';

export const ApolloProvider = ({ children }: { children: ReactNode }) => (
<Provider client={client}>{children}</Provider>
);
9 changes: 8 additions & 1 deletion packages/webapp/src/mocks/factories/crudDemoItem.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import { OperationDescriptor } from 'react-relay/hooks';

import crudDemoItemDetailsQueryGraphql from '../../routes/crudDemoItem/crudDemoItemDetails/__generated__/crudDemoItemDetailsQuery.graphql';
import EditCrudDemoItemQuery from '../../routes/crudDemoItem/editCrudDemoItem/__generated__/editCrudDemoItemQuery.graphql';
import { connectionFromArray } from '../../tests/utils/fixtures';
import { composeMockedQueryResult, connectionFromArray } from '../../tests/utils/fixtures';
import CrudDemoItemListQuery from '../../routes/crudDemoItem/crudDemoItemList/__generated__/crudDemoItemListQuery.graphql';
import { CRUD_DEMO_ITEM_DETAILS_QUERY } from '../../routes/crudDemoItem/crudDemoItemDetails/crudDemoItemDetails.component';

export const fillCrudDemoItemDetailsQuery = (
env: RelayMockEnvironment,
Expand All @@ -21,6 +22,12 @@ export const fillCrudDemoItemDetailsQuery = (
})
);
env.mock.queuePendingOperation(crudDemoItemDetailsQueryGraphql, variables);
return composeMockedQueryResult(CRUD_DEMO_ITEM_DETAILS_QUERY, {
variables,
data: {
crudDemoItem: data,
},
});
};

export const fillEditCrudDemoItemQuery = (
Expand Down
3 changes: 2 additions & 1 deletion packages/webapp/src/modules/stripe/stripe.mutations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ graphql`
}
paymentMethodEdge @appendEdge(connections: $connections) {
node {
...stripePaymentMethodFragment @relay(mask: false)
# commented only because of the broken apollo types: need to fix it after migration
# ...stripePaymentMethodFragment @relay(mask: false)
...stripePaymentMethodFragment
}
}
Expand Down
3 changes: 2 additions & 1 deletion packages/webapp/src/modules/stripe/stripe.queries.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ graphql`
allPaymentMethods(first: 100) @connection(key: "stripe_allPaymentMethods") {
edges {
node {
...stripePaymentMethodFragment @relay(mask: false)
# commented only because of the broken apollo types: need to fix it after migration
# ...stripePaymentMethodFragment @relay(mask: false)
...stripePaymentMethodFragment
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,19 @@ describe('CrudDemoItemDetails: Component', () => {
</Routes>
);

it('should render item details', () => {
it('should render item details', async () => {
const routerProps = createMockRouterProps(routePath, { id: defaultItemId });
const relayEnvironment = createMockEnvironment();
fillCommonQueryWithUser(relayEnvironment);
fillCrudDemoItemDetailsQuery(relayEnvironment, { name: 'demo item name' }, { id: defaultItemId });
const variables = { id: defaultItemId };
const data = { name: 'demo item name' };
const mockRequest = fillCrudDemoItemDetailsQuery(relayEnvironment, data, variables);

render(<Component />, { routerProps, relayEnvironment });
const apolloMocks = [mockRequest];

expect(screen.getByText(/demo item name/i)).toBeInTheDocument();
render(<Component />, { routerProps, relayEnvironment, apolloMocks });

expect(await screen.findByText(/Loading .../i)).toBeInTheDocument();
expect(await screen.findByText(/demo item name/i)).toBeInTheDocument();
});
});
Original file line number Diff line number Diff line change
@@ -1,36 +1,48 @@
import { Suspense, useEffect } from 'react';
import graphql from 'babel-plugin-relay/macro';
import { useQueryLoader } from 'react-relay';
import { useQuery } from '@apollo/client';
import { useParams } from 'react-router';
import { crudDemoItemDetailsQuery } from './__generated__/crudDemoItemDetailsQuery.graphql';
import { CrudDemoItemDetailsContent } from './crudDemoItemDetailsContent.component';
import { FormattedMessage } from 'react-intl';
import { gql } from '../../../shared/services/graphqlApi/__generated/gql';
import { useGenerateLocalePath } from '../../../shared/hooks/localePaths';
import { BackButton } from '../../../shared/components/backButton';
import { RoutesConfig } from '../../../app/config/routes';
import { Container, Header } from './crudDemoItemDetails.styles';

export const CRUD_DEMO_ITEM_DETAILS_QUERY = gql(/* GraphQL */ `
query crudDemoItemDetailsQuery($id: ID!) {
crudDemoItem(id: $id) {
id
name
}
}
`);

export const CrudDemoItemDetails = () => {
type Params = {
id: string;
};
const generateLocalePath = useGenerateLocalePath();
const { id } = useParams<keyof Params>() as Params;

const [queryRef, loadQuery] = useQueryLoader<crudDemoItemDetailsQuery>(graphql`
query crudDemoItemDetailsQuery($id: ID!) {
crudDemoItem(id: $id) {
id
name
}
}
`);

useEffect(() => {
loadQuery({ id });
}, [loadQuery, id]);
const { loading, data } = useQuery(CRUD_DEMO_ITEM_DETAILS_QUERY, {
variables: {
id,
},
});

if (!queryRef) {
return null;
if (loading) {
return (
<span>
<FormattedMessage defaultMessage="Loading ..." id="Loading message" />
</span>
);
}

const itemData = data?.crudDemoItem;

return (
<Suspense fallback={<span>Loading ...</span>}>
<CrudDemoItemDetailsContent queryRef={queryRef} />
</Suspense>
<Container>
<BackButton to={generateLocalePath(RoutesConfig.crudDemoItem.list)} />
<Header>{itemData?.name}</Header>
</Container>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import { RoutesConfig } from '../../../app/config/routes';
import { fillCommonQueryWithUser } from '../../../shared/utils/commonQuery';
import { createMockRouterProps } from '../../../tests/utils/rendering';
import { fillCrudDemoItemDetailsQuery } from '../../../mocks/factories/crudDemoItem';
import { CrudDemoItemDetails } from './crudDemoItemDetails.component';
import { composeMockedQueryResult } from '../../../tests/utils/fixtures';
import { CRUD_DEMO_ITEM_DETAILS_QUERY, CrudDemoItemDetails } from './crudDemoItemDetails.component';

const routePath = ['crudDemoItem', 'details'];
const defaultItemId = 'test-id';
Expand All @@ -24,18 +25,25 @@ export default {
};

export const Default = Template.bind({});
const variables = { id: defaultItemId };
const data = {
name: 'Demo item name',
};
Default.decorators = [
withProviders({
routerProps: createMockRouterProps(routePath, { id: defaultItemId }),
routerProps: createMockRouterProps(routePath, variables),
relayEnvironment: (env) => {
fillCommonQueryWithUser(env);
fillCrudDemoItemDetailsQuery(
env,
{
name: 'Demo item name',
},
{ id: defaultItemId }
);
// todo: replace composeMockedQueryResult with fillCrudDemoItemDetailsQuery during relay removal
fillCrudDemoItemDetailsQuery(env, data, variables);
},
apolloMocks: [
composeMockedQueryResult(CRUD_DEMO_ITEM_DETAILS_QUERY, {
variables: variables,
data: {
crudDemoItem: data,
},
}),
],
}),
];

This file was deleted.

1 change: 1 addition & 0 deletions packages/webapp/src/routes/demoItem/demoItem.graphql.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import graphql from 'babel-plugin-relay/macro';
import { demoItemQuery } from './__generated__/demoItemQuery.graphql';

export const useDemoItemQuery = () => {
// todo: pass context: { schemaType = SchemaType.Contentful } when use Apollo client
return useQueryLoader<demoItemQuery>(graphql`
query demoItemQuery($id: String!) {
demoItem(id: $id) {
Expand Down
1 change: 1 addition & 0 deletions packages/webapp/src/routes/demoItems/demoItems.graphql.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import graphql from 'babel-plugin-relay/macro';
import { demoItemsAllQuery } from './__generated__/demoItemsAllQuery.graphql';

export const useDemoItemsAllQuery = () =>
// todo: pass context: { schemaType = SchemaType.Contentful } when use Apollo client
useQueryLoader<demoItemsAllQuery>(graphql`
query demoItemsAllQuery {
demoItemCollection {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const Notifications = () => {

const [listQueryRef, loadListQuery] = useQueryLoader<notificationsListQuery>(
graphql`
query notificationsListQuery {
query notificationsListQuery($count: Int = 20, $cursor: String) {
...notificationsListContent
...notificationsButtonContent
}
Expand Down
Loading

0 comments on commit 63ecba2

Please sign in to comment.