apollo-client.code-snippets

{
  "useFetch": {
    "scope": "javascript,javascriptreact",
    "prefix": ["FetchHook", "useFetch"],
    "description": "Create a useFetch hook based on useQuery from the @apollo/client lib.",
    "body": [
      "import QUERY from './Fetch${1/(.+)$/${1:/capitalize}/}.gql';",
      "import {useQuery} from '@apollo/client';",
      "import PropTypes from 'prop-types';",
      "",
      "export const ${1/(.+)$/${1:/upcase}/}_SHAPE = {};",
      "",
      "function extract({data}) {",
      "    return data;",
      "}",
      "",
      "export default function $TM_FILENAME_BASE(options) {",
      "    const {data, loading, error} = useQuery(QUERY, $2options);",
      "",
      "    try {",
      "        return {",
      "            data: data && extract({data}),",
      "            loading,",
      "            error,",
      "        };",
      "    }",
      "    catch (cause) {",
      "        return {loading, error: cause};",
      "    }",
      "}",
      ""
    ]
  },
  "useLazyFetch": {
    "scope": "javascript,javascriptreact",
    "prefix": ["LazyFetchHook", "useLazyFetch"],
    "description": "Create a useLazyFetch hook based on useLazyQuery from the @apollo/client lib.",
    "body": [
      "import QUERY from './Fetch${1/(.+)$/${1:/capitalize}/}.gql';",
      "import {useLazyQuery} from '@apollo/client';",
      "import PropTypes from 'prop-types';",
      "import {useCallback} from 'react';",
      "",
      "export const ${1/(.+)$/${1:/upcase}/}_SHAPE = {};",
      "",
      "function extract({data}) {",
      "    return data;",
      "}",
      "",
      "export default function $TM_FILENAME_BASE(options) {",
      "    const [query, {data, loading, error}] = useLazyQuery(QUERY, $2options);",
      "",
      "    const fetch = useCallback(async (variables) => {",
      "        const response = await query({variables});",
      "        return extract(response);",
      "    }, [query]);",
      "",
      "    try {",
      "        return [fetch, {",
      "            data: data && extract({data}),",
      "            loading,",
      "            error,",
      "        }];",
      "    }",
      "    catch (cause) {",
      "        return [fetch, {loading, error: cause}];",
      "    }",
      "}",
      ""
    ]
  },
  "useMutation": {
    "scope": "javascript,javascriptreact",
    "prefix": ["MutationHook", "useMutation"],
    "description": "Create a useMutation hook based on useMutation from the @apollo/client lib.",
    "body": [
      "import MUTATION from './${1/(.+)$/${1:/capitalize}/}${2/(.+)$/${1:/capitalize}/}.gql';",
      "import {useMutation, useApolloClient} from '@apollo/client';",
      "import {useCallback} from 'react';",
      "",
      "function clearCache(cache, id) {",
      "    $BLOCK_COMMENT_START",
      "    * TODO: Ensure what typename you have to remove. Or may be update is better in your case.",
      "    * cache.evict({id: `__typename:\\${id}`});",
      "    $BLOCK_COMMENT_END",
      "",
      "    $BLOCK_COMMENT_START",
      "    * TODO: Usually needed only for remove operation",
      "    * cache.gc();",
      "    $BLOCK_COMMENT_END",
      "}",
      "",
      "function extract({data}) {",
      "    return data;",
      "}",
      "",
      "export default function $TM_FILENAME_BASE(options) {",
      "    const {cache} = useApolloClient();",
      "    const [mutation, {data, loading, error}] = useMutation(MUTATION, $3options);",
      "",
      "    const $1 = useCallback(async (variables) => {",
      "        const response = await mutation({variables});",
      "        const result = extract(response);",
      "        clearCache(cache, result.id);",
      "        return result;",
      "    }, [cache, mutation]);",
      "",
      "    try {",
      "        return [$1, {",
      "            data: data && extract({data}),",
      "            loading,",
      "            error,",
      "        }];",
      "    }",
      "    catch (cause) {",
      "        return [$1, {loading, error: cause}];",
      "    }",
      "}",
      ""
    ]
  },
  "ContextProvider": {
    "scope": "javascript,javascriptreact",
    "prefix": ["cp", "ContextProvider"],
    "description": "Create a ContextProvider component.",
    "body": [
      "import {${1/(.+)$/${1:/upcase}/}_SHAPE} from './useFetch';",
      "import PropTypes from 'prop-types';",
      "import {createContext, useContext} from 'react';",
      "",
      "const ${1/(.+)$/${1:/capitalize}/}Context = createContext();",
      "",
      "export function use${1/(.+)$/${1:/capitalize}/}Context() {",
      "    return useContext(${1/(.+)$/${1:/capitalize}/}Context);",
      "}",
      "",
      "export default function $TM_FILENAME_BASE({children, ...props}) {",
      "    return (",
      "        <${1/(.+)$/${1:/capitalize}/}Context.Provider value={props}>",
      "            {children}",
      "        </${1/(.+)$/${1:/capitalize}/}Context.Provider>",
      "    );",
      "}",
      "",
      "$TM_FILENAME_BASE.propTypes = {",
      "    children: PropTypes.node.isRequired,",
      "    data: $2PropTypes.shape(${1/(.+)$/${1:/upcase}/}_SHAPE),",
      "    error: PropTypes.instanceOf(Error),",
      "    loading: PropTypes.bool,",
      "};",
      "",
      "$TM_FILENAME_BASE.defaultProps = {",
      "    data: undefined,",
      "    error: undefined,",
      "    loading: false,",
      "};",
      ""
    ]
  },
  "DataProvider": {
    "scope": "javascript,javascriptreact",
    "prefix": ["dp", "DataProvider"],
    "description": "Create a DataProvider component.",
    "body": [
      "import ContextProvider from './ContextProvider';",
      "import useFetch from './useFetch';",
      "import PropTypes from 'prop-types';",
      "",
      "export default function $TM_FILENAME_BASE({children, ...options}) {",
      "    const result = useFetch($1options);",
      "",
      "    return (",
      "        <ContextProvider {...result}>",
      "            {children}",
      "        </ContextProvider>",
      "    );",
      "}",
      "",
      "$TM_FILENAME_BASE.propTypes = {",
      "    children: PropTypes.node.isRequired,",
      "};",
      ""
    ]
  }
}