@dww/graphiql-code-exporter/es/snippets/javascript/reactHooks.js

Export working code snippets from GraphiQL queries

import commentsFactory from '../../utils/commentsFactory';
import capitalizeFirstLetter from '../../utils/capitalizeFirstLetter';

var comments = {
  effectEmptyArray: 'empty array to only fetch on did mount\n',
  finallyLoading: 'finally makes sures loading is set to false in any case\n'
};
export default {
  language: 'JavaScript',
  name: 'react-with-hooks',
  prismLanguage: 'jsx',
  options: [{ id: 'comments', label: 'show comments', initial: false }, { id: 'reactNative', label: 'react-native', initial: false }],
  generate: function generate(_ref) {
    var serverUrl = _ref.serverUrl,
        headers = _ref.headers,
        variables = _ref.variables,
        variableName = _ref.variableName,
        operationType = _ref.operationType,
        operationName = _ref.operationName,
        operation = _ref.operation,
        options = _ref.options;

    var getComment = commentsFactory(options.comments, comments);

    var element = options.reactNative ? 'View' : 'div';

    var reactImport = 'import React, { useState, useEffect } from "react"';
    var reactNativeImport = options.reactNative ? 'import { View } from "react-native"' : '';

    var graphqlQuery = 'const ' + variableName + ' = `\n' + operation + '`';

    var urlVariable = 'const serverUrl = "' + serverUrl + '"';
    var vars = JSON.stringify(variables, null, 2);
    var heads = JSON.stringify(headers, null, 2);

    var fetchBody = 'fetch(serverUrl, {\n    method: \'POST\',\n    headers: ' + heads + ',\n    body: JSON.stringify({ query: ' + variableName + ', variables: ' + vars + ' })\n  })\n    .then(res => res.json())\n    .then(({ data, errors }) => {\n      if (errors) {\n        setErrors(errors)\n      }\n      \n      setData(data)\n    })\n    .catch(err => setErrors([err]))\n    ' + getComment('finallyLoading') + '.finally(() => setLoading(false))\n  ';

    var snippet = '\n' + reactImport + '\n' + reactNativeImport + '\n\n' + graphqlQuery + '\n\n' + urlVariable + '\n\nfunction ' + capitalizeFirstLetter(operationName) + '() {\n  const [loading, setLoading] = useState(false)\n  const [errors, setErrors] = useState([])\n  const [data, setData] = useState(null)\n\n  useEffect(\n    () => {\n      setLoading(true)\n      \n      ' + fetchBody + '\n    },\n    ' + getComment('effectEmptyArray') + '[]\n  )\n\n  if (loading) return <' + element + '>Loading</' + element + '>\n  if (errors.length > 0) return <' + element + '>{JSON.stringify(errors)}</' + element + '>\n\n  return (\n    <' + element + '>{JSON.stringify(data, null, 2)}</' + element + '>\n  )\n}';

    return snippet;
  }
};