docs: data fetching code examples

docs: data fetching code examples #2

lint-staged.config.js

@@ -1,5 +1,3 @@
-const micromatch = require('micromatch');
-
 module.exports = {
   '*.md': ['prettier --write --parser markdown'],
   '*.yaml': ['prettier --write --parser yaml'],
@@ -21,7 +19,7 @@ module.exports = {
     // For that reason, we move the `--onlyChanged` flag next to it.
     'yarn lint:js --reporters=jest-silent-reporter --onlyChanged',
   ],
-  '!(cypress)/**/*.{ts,tsx}': [
+  '!(cypress|website)/**/*.{ts,tsx}': [
     'prettier --write',
     // NOTE: apparently if you pass some argument that is not a flag AFTER the `reporters`
     // flag, jest does not seem correctly parse the arguments.
@@ -47,6 +45,7 @@ module.exports = {
     'yarn lint:js --reporters=jest-silent-reporter --onlyChanged',
     () => 'yarn typecheck:cypress',
   ],
+  'cypress/**/*.{ts,tsx}': ['prettier --write'],
   '*.css': [
     'prettier --write --parser css',
     // NOTE: apparently if you pass some argument that is not a flag AFTER the `reporters`

website/src/@commercetools-docs/gatsby-theme-docs/overrides/.gitignore

@@ -0,0 +1 @@
+addon-components.js

website/src/code-examples/data-fetching/channels.tsx

@@ -1,8 +1,19 @@
 import { useQuery } from '@apollo/client/react';
 import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import type {
+  TChannelQueryResult,
+  TFetchChannelsQueryVariables,
+} from '../../../types/generated/ctp';
 
-const Channels = (props) => {
-  const { data } = useQuery(FetchChannelsQuery, {
+type TChannelsProps = {
+  // component props types
+};
+
+const Channels = (props: TChannelsProps) => {
+  const { data } = useQuery<
+    { channels: TChannelQueryResult },
+    TFetchChannelsQueryVariables
+  >(FetchChannelsQuery, {
     context: {
       target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
     },

website/src/code-examples/data-fetching/connector-hook-usage.js

@@ -0,0 +1,17 @@
+import { ContentNotification } from '@commercetools-uikit/notifications';
+import Text from '@commercetools-uikit/text';
+import { useChannelsFetcher } from '../../hooks/use-channels-connector';
+
+const Channels = (props) => {
+  const { channels, error } = useChannelsFetcher();
+
+  if (error) {
+    return (
+      <ContentNotification type="error">
+        <Text.Body>{getErrorMessage(error)}</Text.Body>
+      </ContentNotification>
+    );
+  }
+
+  return <div>{/* Do something with `channels` */}</div>;
+};

website/src/code-examples/data-fetching/connector-hook-usage.tsx

@@ -0,0 +1,21 @@
+import { ContentNotification } from '@commercetools-uikit/notifications';
+import Text from '@commercetools-uikit/text';
+import { useChannelsFetcher } from '../../hooks/use-channels-connector';
+
+type TChannelsProps = {
+  // component props types
+};
+
+const Channels = (props: TChannelsProps) => {
+  const { channels, error } = useChannelsFetcher();
+
+  if (error) {
+    return (
+      <ContentNotification type="error">
+        <Text.Body>{getErrorMessage(error)}</Text.Body>
+      </ContentNotification>
+    );
+  }
+
+  return <div>{/* Do something with `channels` */}</div>;
+};

website/src/code-examples/data-fetching/connector-hook.js

@@ -0,0 +1,16 @@
+import { useQuery } from '@apollo/client/react';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+
+export const useChannelsFetcher = () => {
+  const { data, error, loading } = useQuery(FetchChannelsQuery, {
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+    },
+  });
+
+  return {
+    channels: data?.channels,
+    error,
+    loading,
+  };
+};

website/src/code-examples/data-fetching/connector-hook.tsx

@@ -0,0 +1,23 @@
+import { useQuery } from '@apollo/client/react';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import type {
+  TChannelQueryResult,
+  TFetchChannelsQueryVariables,
+} from '../../../types/generated/ctp';
+
+export const useChannelsFetcher = () => {
+  const { data, error, loading } = useQuery<
+    { channels: TChannelQueryResult },
+    TFetchChannelsQueryVariables
+  >(FetchChannelsQuery, {
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+    },
+  });
+
+  return {
+    channels: data?.channels,
+    error,
+    loading,
+  };
+};

website/src/code-examples/data-fetching/error-handling.js

@@ -0,0 +1,22 @@
+import { useQuery } from '@apollo/client/react';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import { ContentNotification } from '@commercetools-uikit/notifications';
+import Text from '@commercetools-uikit/text';
+
+const Channels = (props) => {
+  const { data, error } = useQuery(FetchChannelsQuery, {
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+    },
+  });
+
+  if (error) {
+    return (
+      <ContentNotification type="error">
+        <Text.Body>{getErrorMessage(error)}</Text.Body>
+      </ContentNotification>
+    );
+  }
+
+  return <div>{/* Do something with `data` */}</div>;
+};

website/src/code-examples/data-fetching/error-handling.tsx

@@ -0,0 +1,33 @@
+import { useQuery } from '@apollo/client/react';
+import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
+import { ContentNotification } from '@commercetools-uikit/notifications';
+import Text from '@commercetools-uikit/text';
+import type {
+  TChannelQueryResult,
+  TFetchChannelsQueryVariables,
+} from '../../../types/generated/ctp';
+
+type TChannelsProps = {
+  // component props types
+};
+
+const Channels = (props: TChannelsProps) => {
+  const { data, error } = useQuery<
+    { channels: TChannelQueryResult },
+    TFetchChannelsQueryVariables
+  >(FetchChannelsQuery, {
+    context: {
+      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
+    },
+  });
+
+  if (error) {
+    return (
+      <ContentNotification type="error">
+        <Text.Body>{getErrorMessage(error)}</Text.Body>
+      </ContentNotification>
+    );
+  }
+
+  return <div>{/* Do something with `data` */}</div>;
+};

website/src/code-examples/data-fetching/error-message.js

@@ -0,0 +1,2 @@
+const getErrorMessage = (error) =>
+  error.graphQLErrors?.map((e) => e.message).join('\n') || error.message;

website/src/code-examples/data-fetching/error-message.tsx

@@ -0,0 +1,4 @@
+import { ApolloError } from '@apollo/client';
+
+const getErrorMessage = (error: ApolloError) =>
+  error.graphQLErrors?.map((e) => e.message).join('\n') || error.message;

website/src/code-examples/data-fetching/external-graphql-api.js

@@ -0,0 +1,18 @@
+import {
+  createApolloContextForProxyForwardTo,
+  useMcQuery,
+} from '@commercetools-frontend/application-shell';
+import Text from '@commercetools-uikit/text';
+import HelloWorldQuery from './hello-world.graphql';
+
+const HelloWorld = () => {
+  const { loading, data, error } = useMcQuery(HelloWorldQuery, {
+    context: createApolloContextForProxyForwardTo({
+      uri: 'https://my-custom-app.com/graphql',
+    }),
+  });
+
+  if (loading) return 'Loading...';
+  if (error) return `Error! ${error.message}`;
+  return <Text.Headline as="h1">{data.title}</Text.Headline>;
+};

website/src/code-examples/data-fetching/external-graphql-api.tsx

@@ -0,0 +1,21 @@
+import {
+  createApolloContextForProxyForwardTo,
+  useMcQuery,
+} from '@commercetools-frontend/application-shell';
+import Text from '@commercetools-uikit/text';
+import HelloWorldQuery from './hello-world.graphql';
+
+const HelloWorld = () => {
+  const { loading, data, error } = useMcQuery<
+    THelloWorldQueryData,
+    THelloWorldQueryVariables
+  >(HelloWorldQuery, {
+    context: createApolloContextForProxyForwardTo({
+      uri: 'https://my-custom-app.com/graphql',
+    }),
+  });
+
+  if (loading) return 'Loading...';
+  if (error) return `Error! ${error.message}`;
+  return <Text.Headline as="h1">{data.title}</Text.Headline>;
+};

website/src/code-examples/data-fetching/rest-api.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { useAsyncDispatch, actions } from '@commercetools-frontend/sdk';
+import { MC_API_PROXY_TARGETS } from '@commercetools-frontend/constants';
+
+const Channels = (props) => {
+  const dispatch = useAsyncDispatch();
+  useEffect(() => {
+    async function execute() {
+      try {
+        const result = await dispatch(
+          actions.get({
+            mcApiProxyTarget: MC_API_PROXY_TARGETS.COMMERCETOOLS_PLATFORM,
+            service: 'channels',
+            options: {
+              // query options
+            },
+          })
+        );
+        // Update state with `result`
+      } catch (error) {
+        // Update state with `error`
+      }
+    }
+    execute();
+  }, [dispatch]);
+
+  return <div>{/* Do something with the state */}</div>;
+};

website/src/code-examples/data-fetching/rest-api.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { useAsyncDispatch, actions } from '@commercetools-frontend/sdk';
+import { MC_API_PROXY_TARGETS } from '@commercetools-frontend/constants';
+
+type TChannelsProps = {
+  // component props types
+};
+
+const Channels = (props: TChannelsProps) => {
+  const dispatch = useAsyncDispatch();
+  useEffect(() => {
+    async function execute() {
+      try {
+        const result = await dispatch(
+          actions.get({
+            mcApiProxyTarget: MC_API_PROXY_TARGETS.COMMERCETOOLS_PLATFORM,
+            service: 'channels',
+            options: {
+              // query options
+            },
+          })
+        );
+        // Update state with `result`
+      } catch (error) {
+        // Update state with `error`
+      }
+    }
+    execute();
+  }, [dispatch]);
+
+  return <div>{/* Do something with the state */}</div>;
+};