npmpackage.info

Gathering detailed insights and metrics for next-graphql-let-plugin

Other packages similar to next-graphql-let-plugin

next-plugin-graphql-let

1.0.1

Automatically configures webpack for graphql-let usage in Next.js.

@crabas0npm/voluptatem-aspernatur-ducimus

1.0.0

> Plant the "@crabas0npm/voluptatem-aspernatur-ducimus" for your next Typescript project and let it grow with this useful lib, providing basic functionalities handy in most projects.

Gathering detailed insights and metrics for next-graphql-let-plugin

next-graphql-let-plugin - 1.0.0 | npmpackage.info

next-graphql-let-plugin

Frictionless automatic GraphQL Typescript generation setup for Next.js

1.0.0

MIT

JavaScript

11.49 kB

Installations

npm install next-graphql-let-plugin

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

14.17.0

NPM Version

7.14.0 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Initial release

v1.0.0

Updated on Jul 11, 2021

View All 1 releases

Languages

JavaScript

JavaScript (100%)

Developer

bring-shrubbery

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

8 Stars

12 Commits

1 Watchers

1 Branches

1 Contributors

Updated on Feb 14, 2025

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

1.0.0

Package Id

next-graphql-let-plugin@1.0.0

Unpacked Size

11.49 kB

Size

5.08 kB

File Count

NPM Version

7.14.0

Node Version

14.17.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

@graphql-codegen/cli graphql graphql-let next

Next.js + graphql-let plugin

This Next.js plugin makes it easy to setup graphql-let in your Next.js project. The main purpose of this plugin is to eliminate configuration and re-generation friction that you might experience with pure graphql-let setup. Mainly this plugin make next.config.js cleaner and re-generates the types and query hooks on every yarn dev or yarn build run.

Getting started

Although Next.js plugins usually don't require a lot of setup to get started, this one required couple of steps to be completed before it will work:

1. Install dependencies

Note that some of these dependencies are here to support @apollo/client integration specifically.

With yarn:

1yarn add @apollo/client graphql graphql-let
2yarn add -D next-graphql-let-plugin @graphql-codegen/cli @graphql-codegen/import-types-preset @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo

With npm:

1npm i @apollo/client graphql graphql-let
2npm i -D next-graphql-let-plugin @graphql-codegen/cli @graphql-codegen/import-types-preset @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo

2. Add the plugin to next.config.js.

1// next.config.js
2const withGraphQLLetPlugin = require("next-graphql-let-plugin")({
3  // Plugin options go here...
4});
5
6module.exports = withGraphQLLetPlugin({
7  // Regular config goes here...
8});

3. Configure `graphql-let.yml`

Since graphql-let does not allow to use json configuration that could be defined through the code, we have to create a graphql-let.yml file with the configuration. Luckily, this plugin will create that file for you if you don't have one - su just run:

1# yarn
2yarn dev
3
4# npm
5npm run dev

Then, you just have to customize the configuration to your needs. For starters and simple schema we recommend following schema:

1schema: "**/*.graphqls"
2documents: "**/*.graphql"
3plugins:
4  - typescript-operations
5  - typescript-react-apollo
6cacheDir: .cache

You can also provide a remote schema in the config by pointing it to the GraphQL API url.

You can find full options that are available for you in graphql-let.yml config here.

4. Add client provider

You will need to create a GraphQL client provider. To have the provider work on every page in your Next.js project it's best to add it to the _app.tsx file. You can find a full guide on how to setup Apollo Client in a frontend app on this page, but here's a simple example you can use:

1import type { AppProps } from "next/app";
2import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
3
4const client = new ApolloClient({
5  uri: "", // Enter URL to your API here
6  cache: new InMemoryCache(),
7});
8
9function MyApp({ Component, pageProps }: AppProps) {
10  return (
11    <ApolloProvider client={client}>
12      <Component {...pageProps} />
13    </ApolloProvider>
14  );
15}
16
17export default MyApp;

5. Run `yarn dev` or `npm run dev`

That's it! You can now add .graphql files to your project with queries defined in them and graphql-let will generate fetching functions for you that you can use straight in your project like so:

1# lib/queries/author.graphql
2query GetAuthors {
3  authors {
4    id
5    name
6  }
7}

The above query gets converted into a query hook like this:

1import { useGetAuthorsQuery } from "../lib/queries/author.graphql";
2
3export default function Home() {
4  const { data } = useGetAuthorsQuery();
5
6  return (
7    <ul>
8      {data?.authors.map((author) => (
9        <li key={author.id}>author.name</li>
10      ))}
11    </ul>
12  );
13}

Contributors

Antoni Silvestrovic (author)

License

MIT

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

SAST

Determines if the project uses static code analysis.

10

License

Determines if the project has defined a license.

9

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to next-graphql-let-plugin

Other packages similar to next-graphql-let-plugin

next-graphql-let-plugin

Installations

Developer Guide

No

CommonJS

14.17.0

7.14.0

Pull Requests

0

0

0

Issues

0

0

0

Releases

Languages

Developer

bring-shrubbery

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Next.js + graphql-let plugin

Getting started

1. Install dependencies

2. Add the plugin to next.config.js.

3. Configure graphql-let.yml

4. Add client provider

5. Run yarn dev or npm run dev

Contributors

License

10

10

10

10

9

0

0

0

0

0

0

0

0

4

/10

3. Configure `graphql-let.yml`

5. Run `yarn dev` or `npm run dev`