Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@graphiql/plugin-code-exporter
Advanced tools
Changelog
GraphQL Language Service Interface 2.0.0 - 11 Sep, 2018
Readme
This package provides a plugin that integrates the GraphiQL Code Exporter into the GraphiQL UI.
Use your favorite package manager to install the package:
npm i -S @graphiql/plugin-code-exporter
The following packages are peer dependencies, so make sure you have them installed as well:
npm i -S react react-dom graphql
See
GraphiQL Code Exporter README
for all details on available props
and how to
create snippets.
import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
import { GraphiQL } from 'graphiql';
import { useState } from 'react';
import 'graphiql/graphiql.css';
import '@graphiql/plugin-code-exporter/dist/style.css';
const fetcher = createGraphiQLFetcher({
url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
});
/*
Example code for snippets. See https://github.com/OneGraph/graphiql-code-exporter#snippets for details
*/
const removeQueryName = query =>
query.replace(
/^[^{(]+([{(])/,
(_match, openingCurlyBracketsOrParenthesis) =>
`query ${openingCurlyBracketsOrParenthesis}`,
);
const getQuery = (arg, spaceCount) => {
const { operationDataList } = arg;
const { query } = operationDataList[0];
const anonymousQuery = removeQueryName(query);
return (
' '.repeat(spaceCount) +
anonymousQuery.replaceAll('\n', '\n' + ' '.repeat(spaceCount))
);
};
const exampleSnippetOne = {
name: 'Example One',
language: 'JavaScript',
codeMirrorMode: 'jsx',
options: [],
generate: arg => `export const query = graphql\`
${getQuery(arg, 2)}
\`
`,
};
const exampleSnippetTwo = {
name: 'Example Two',
language: 'JavaScript',
codeMirrorMode: 'jsx',
options: [],
generate: arg => `import { graphql } from 'graphql'
export const query = graphql\`
${getQuery(arg, 2)}
\`
`,
};
const snippets = [exampleSnippetOne, exampleSnippetTwo];
const exporter = codeExporterPlugin({
snippets,
codeMirrorTheme: 'graphiql',
});
function GraphiQLWithExplorer() {
return (
<GraphiQL fetcher={fetcher} defaultQuery={query} plugins={[exporter]} />
);
}
You can also use this plugin with unpkg
, jsdelivr
, and other CDNs.
See the example HTML file for this plugin
FAQs
This package provides a plugin that integrates the [GraphiQL Code Exporter](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI.
The npm package @graphiql/plugin-code-exporter receives a total of 1,041 weekly downloads. As such, @graphiql/plugin-code-exporter popularity was classified as popular.
We found that @graphiql/plugin-code-exporter demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.