graphql-tag vs graphql-tools vs optics-ts vs graphql-codegen
GraphQL Development Tools
Search packages..
graphql-taggraphql-toolsoptics-tsgraphql-codegenSimilar Packages:
GraphQL Development Tools

GraphQL Development Tools are libraries and utilities that assist developers in building, managing, and optimizing GraphQL APIs. These tools provide functionalities such as schema generation, type safety, query optimization, and more, making the development process more efficient and reliable. They help in automating repetitive tasks, ensuring better code quality, and enhancing the overall developer experience when working with GraphQL. graphql-codegen is a tool that generates TypeScript types, React hooks, and other artifacts from your GraphQL schema and queries, ensuring type safety and reducing manual coding. graphql-tag is a small library that allows you to write GraphQL queries using template literals, making it easier to embed queries directly in your JavaScript or TypeScript code. graphql-tools is a set of utilities for building and manipulating GraphQL schemas, including schema stitching, type merging, and creating mock servers, which helps in developing and testing GraphQL APIs more effectively. optics-ts is a library for tracking and analyzing GraphQL query performance and usage, providing insights into query execution times, frequency, and other metrics to help optimize your GraphQL API and improve its efficiency.

Npm Package Weekly Downloads Trend
3 Years
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
graphql-tag9,093,2872,339-1004 years agoMIT
graphql-tools799,2745,4162.61 kB15811 days agoMIT
optics-ts241,887890137 kB212 years agoMIT
graphql-codegen16,6823,043-367-MIT
Feature Comparison: graphql-tag vs graphql-tools vs optics-ts vs graphql-codegen

Type Safety

  • graphql-tag:

    graphql-tag does not provide type safety on its own, but it works well with tools like graphql-codegen to generate types from the queries you define using its template literals.

  • graphql-tools:

    graphql-tools does not focus on type safety, but it allows you to define and manipulate your GraphQL schema in a type-safe manner if used with TypeScript.

  • optics-ts:

    optics-ts is designed for type-safe query analysis and performance tracking, providing a type-safe API for instrumenting and analyzing your GraphQL queries.

  • graphql-codegen:

    graphql-codegen generates TypeScript types based on your GraphQL schema and queries, ensuring type safety throughout your application and reducing the risk of runtime errors.

Query Embedding

  • graphql-tag:

    graphql-tag allows you to embed GraphQL queries directly in your code using template literals, making it easy to define and reuse queries in a readable format.

  • graphql-tools:

    graphql-tools does not handle query embedding, as it focuses on schema creation and manipulation rather than query definition.

  • optics-ts:

    optics-ts does not embed queries; it analyzes queries at runtime to provide performance insights and metrics.

  • graphql-codegen:

    graphql-codegen does not embed queries directly; instead, it generates code based on the queries you provide, which can be defined anywhere in your codebase.

Schema Manipulation

  • graphql-tag:

    graphql-tag does not manipulate the schema; it simply provides a way to define queries and fragments in a declarative manner.

  • graphql-tools:

    graphql-tools provides extensive utilities for schema manipulation, including merging multiple schemas, stitching them together, and creating mock implementations for testing.

  • optics-ts:

    optics-ts does not manipulate the schema; it works with the existing schema to analyze query performance and usage patterns.

  • graphql-codegen:

    graphql-codegen does not manipulate the schema; it reads the schema to generate types and other artifacts.

Performance Optimization

  • graphql-tag:

    graphql-tag has a minimal impact on performance when embedding queries, but it does not provide any optimization features for query execution.

  • graphql-tools:

    graphql-tools can help optimize schema design by allowing you to create more efficient schemas through stitching and merging, but it does not provide runtime performance optimization.

  • optics-ts:

    optics-ts helps optimize your GraphQL API by providing insights into query performance, allowing you to identify and address slow or inefficient queries.

  • graphql-codegen:

    graphql-codegen optimizes the development process by generating code automatically, but it does not optimize query performance at runtime.

Ease of Use: Code Examples

  • graphql-tag:

    Query embedding with graphql-tag

    import { gql } from 'graphql-tag';
const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
    }
  }
`;
  • graphql-tools:

    Schema stitching with graphql-tools

    import { mergeSchemas } from '@graphql-tools/schema';
const schema1 = makeExecutableSchema({ typeDefs, resolvers });
const schema2 = makeExecutableSchema({ typeDefs, resolvers });
const mergedSchema = mergeSchemas({ schemas: [schema1, schema2] });
  • optics-ts:

    Performance tracking with optics-ts

    import { createOpticsLink } from 'optics-ts';
const link = createOpticsLink({
  url: '/graphql',
  client: myGraphQLClient,
});
  • graphql-codegen:

    TypeScript types generation with graphql-codegen

    documents: './src/**/*.graphql'
config:
  scalars:
    Date: string
    JSON: any
plugins:
  - typescript
  - typescript-resolvers
How to Choose: graphql-tag vs graphql-tools vs optics-ts vs graphql-codegen
  • graphql-tag:

    Choose graphql-tag if you need a lightweight solution for embedding GraphQL queries in your JavaScript or TypeScript code using template literals, making your queries more readable and maintainable.

  • graphql-tools:

    Choose graphql-tools if you are building complex GraphQL schemas and need utilities for schema stitching, type merging, and creating mock servers, which can help in developing and testing your API more effectively.

  • optics-ts:

    Choose optics-ts if you want to gain insights into your GraphQL query performance and usage, helping you identify slow queries and optimize your API for better efficiency.

  • graphql-codegen:

    Choose graphql-codegen if you want to automate the generation of TypeScript types and other artifacts from your GraphQL schema and queries, ensuring type safety and reducing boilerplate code.

Similar Npm Packages to graphql-tag

graphql-tag is a popular library used in JavaScript applications to parse GraphQL query strings into a format that can be understood by GraphQL clients. It provides a simple way to define and manage GraphQL queries and mutations, enabling developers to work with GraphQL in a more structured manner. While graphql-tag is widely used, there are several alternatives in the GraphQL ecosystem that offer different functionalities. Here are a few notable alternatives:

  • apollo-client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. It provides powerful features such as caching, optimistic UI updates, and support for subscriptions. Apollo Client integrates seamlessly with React and other frameworks, making it a popular choice for developers looking to build applications that leverage GraphQL. If you need a robust solution for managing GraphQL data and want to take advantage of advanced features, Apollo Client is an excellent option.
  • graphql-tools is a set of utilities for building and manipulating GraphQL schemas. It allows developers to create, merge, and extend GraphQL schemas easily. With graphql-tools, you can define your schema using a simple syntax and then enhance it with resolvers, middleware, and other functionalities. If your focus is on schema design and manipulation rather than just querying data, graphql-tools provides the necessary tools to create a powerful GraphQL API.
  • graphql.macro is a library that allows you to use GraphQL queries as template literals in your code without the need for a separate parsing step. It leverages Babel macros to enable a more concise and readable syntax for defining GraphQL queries. If you prefer a more streamlined approach to writing GraphQL queries directly in your components, graphql.macro can simplify your workflow significantly.

To see how graphql-tag compares with apollo-client, graphql-tools, and graphql.macro, check out the comparison: Comparing apollo-client vs graphql-tag vs graphql-tools vs graphql.macro.

Similar Npm Packages to graphql-tools

graphql-tools is a powerful set of utilities for building GraphQL schemas and resolvers in JavaScript. It provides developers with tools to create, manipulate, and extend GraphQL schemas easily, making it a popular choice for those looking to implement GraphQL in their applications. With features like schema stitching, merging, and type definitions, graphql-tools simplifies the process of building a robust GraphQL API. However, there are other libraries in the GraphQL ecosystem that also serve similar purposes. Here are a few alternatives:

  • apollo-server is a community-driven, open-source GraphQL server that is designed to work seamlessly with Apollo Client. It provides a straightforward way to set up a GraphQL server with built-in support for features like subscriptions, file uploads, and more. apollo-server is ideal for developers looking for a comprehensive solution that integrates well with the Apollo ecosystem, making it easier to manage both client and server-side GraphQL implementations. Its extensive documentation and community support make it a go-to choice for many developers.
  • express-graphql is a middleware for integrating GraphQL with Express, one of the most popular web frameworks for Node.js. It allows developers to create a GraphQL API quickly and easily by leveraging the existing Express infrastructure. express-graphql is a great choice if you are already using Express in your application and want to add GraphQL capabilities without introducing a new framework. It provides a simple way to define your schema and resolvers while benefiting from the flexibility and middleware capabilities of Express.

To see how graphql-tools compares with apollo-server and express-graphql, check out the comparison: Comparing graphql-tools vs apollo-server vs express-graphql.

Similar Npm Packages to optics-ts

optics-ts is a TypeScript library designed for working with GraphQL queries and mutations in a more type-safe and efficient manner. It provides a way to define and manipulate GraphQL queries using optics, which are a functional programming concept that allows for safe and composable access to deeply nested data structures. This makes it easier to build and maintain complex GraphQL applications while ensuring type safety and reducing runtime errors. While optics-ts offers a unique approach to handling GraphQL, there are several alternatives in the ecosystem that also provide useful functionalities. Here are a few alternatives:

  • graphql-codegen is a powerful tool that generates TypeScript typings, resolvers, and other artifacts based on your GraphQL schema and operations. It helps developers avoid manual typing and ensures that your code is always in sync with your GraphQL schema. If you are looking for a way to automate the generation of TypeScript types and improve the developer experience when working with GraphQL, graphql-codegen is an excellent choice.
  • graphql-tag is a library that allows you to parse GraphQL queries into the format that Apollo Client and other GraphQL clients can understand. It provides a simple way to define your GraphQL queries using template literals, making it easy to integrate GraphQL into your React applications. If you are looking for a straightforward way to handle GraphQL queries in your application, graphql-tag is a great option.
  • graphql-tools is a set of utilities for building and manipulating GraphQL schemas. It provides functionalities for merging schemas, creating mock data, and defining resolvers, making it a versatile tool for GraphQL development. If you need to build complex GraphQL servers or need to manipulate schemas, graphql-tools is a valuable resource.

To see how optics-ts compares with graphql-codegen, graphql-tag, and graphql-tools, check out the comparison: Comparing graphql-codegen vs graphql-tag vs graphql-tools vs optics-ts.

Similar Npm Packages to graphql-codegen

graphql-codegen is a powerful tool designed to automate the generation of TypeScript typings, resolvers, and other code artifacts from GraphQL schemas. It streamlines the development process by reducing the amount of boilerplate code developers need to write, ensuring type safety and consistency across applications. While graphql-codegen is a robust solution, there are other libraries in the GraphQL ecosystem that serve similar purposes. Here are a few alternatives:

  • apollo-codegen was a tool specifically designed for generating TypeScript typings from GraphQL queries and schemas used in Apollo Client applications. Although it has been largely superseded by other tools, it was popular for its ability to integrate seamlessly with Apollo's ecosystem. If you are working with older Apollo projects, you might still encounter this tool, but it's worth noting that it is not actively maintained anymore.
  • graphql-code-generator is another widely used tool that serves a similar purpose to graphql-codegen. It provides a flexible and extensible way to generate TypeScript typings, resolvers, and other code artifacts from GraphQL schemas. With a rich plugin ecosystem, it allows developers to customize the generated output to fit their specific needs. If you are looking for a comprehensive solution with a strong community and support, graphql-code-generator is an excellent choice.
  • graphql-tools is a library that provides utilities for building and manipulating GraphQL schemas. While its primary focus is not on code generation, it can be used in conjunction with other tools to create a more robust development workflow. It allows developers to compose schemas, create mock data, and define resolvers, making it a valuable addition to any GraphQL project.

For a detailed comparison of these packages, check out: Comparing apollo-codegen vs graphql-code-generator vs graphql-codegen vs graphql-tools.

README for graphql-tag

graphql-tag

npm version Build Status Get on Slack

Helpful utilities for parsing GraphQL queries. Includes:

  • gql A JavaScript template literal tag that parses GraphQL query strings into the standard GraphQL AST.
  • /loader A webpack loader to preprocess queries

graphql-tag uses the reference graphql library under the hood as a peer dependency, so in addition to installing this module, you'll also have to install graphql.

gql

The gql template literal tag can be used to concisely write a GraphQL query that is parsed into a standard GraphQL AST. It is the recommended method for passing queries to Apollo Client. While it is primarily built for Apollo Client, it generates a generic GraphQL AST which can be used by any GraphQL client.

import gql from 'graphql-tag';

const query = gql`
  {
    user(id: 5) {
      firstName
      lastName
    }
  }
`

The above query now contains the following syntax tree.

{
  "kind": "Document",
  "definitions": [
    {
      "kind": "OperationDefinition",
      "operation": "query",
      "name": null,
      "variableDefinitions": null,
      "directives": [],
      "selectionSet": {
        "kind": "SelectionSet",
        "selections": [
          {
            "kind": "Field",
            "alias": null,
            "name": {
              "kind": "Name",
              "value": "user",
              ...
            }
          }
        ]
      }
    }
  ]
}

Fragments

The gql tag can also be used to define reusable fragments, which can easily be added to queries or other fragments.

import gql from 'graphql-tag';

const userFragment = gql`
  fragment User_user on User {
    firstName
    lastName
  }
`

The above userFragment document can be embedded in another document using a template literal placeholder.

const query = gql`
  {
    user(id: 5) {
      ...User_user
    }
  }
  ${userFragment}
`

Note: While it may seem redundant to have to both embed the userFragment variable in the template literal AND spread the ...User_user fragment in the graphQL selection set, this requirement makes static analysis by tools such as eslint-plugin-graphql possible.

Why use this?

GraphQL strings are the right way to write queries in your code, because they can be statically analyzed using tools like eslint-plugin-graphql. However, strings are inconvenient to manipulate, if you are trying to do things like add extra fields, merge multiple queries together, or other interesting stuff.

That's where this package comes in - it lets you write your queries with ES2015 template literals and compile them into an AST with the gql tag.

Caching parse results

This package only has one feature - it caches previous parse results in a simple dictionary. This means that if you call the tag on the same query multiple times, it doesn't waste time parsing it again. It also means you can use === to compare queries to check if they are identical.

Importing graphQL files

To add support for importing .graphql/.gql files, see Webpack loading and preprocessing below.

Given a file MyQuery.graphql

query MyQuery {
  ...
}

If you have configured the webpack graphql-tag/loader, you can import modules containing graphQL queries. The imported value will be the pre-built AST.

import MyQuery from 'query.graphql'

Importing queries by name

You can also import query and fragment documents by name.

query MyQuery1 {
  ...
}

query MyQuery2 {
  ...
}

And in your JavaScript:

import { MyQuery1, MyQuery2 } from 'query.graphql'

Preprocessing queries and fragments

Preprocessing GraphQL queries and fragments into ASTs at build time can greatly improve load times.

Babel preprocessing

GraphQL queries can be compiled at build time using babel-plugin-graphql-tag. Pre-compiling queries decreases script initialization time and reduces bundle sizes by potentially removing the need for graphql-tag at runtime.

TypeScript preprocessing

Try this custom transformer to pre-compile your GraphQL queries in TypeScript: ts-transform-graphql-tag.

React Native and Next.js preprocessing

Preprocessing queries via the webpack loader is not always possible. babel-plugin-import-graphql supports importing graphql files directly into your JavaScript by preprocessing GraphQL queries into ASTs at compile-time.

E.g.:

import myImportedQuery from './productsQuery.graphql'

class ProductsPage extends React.Component {
  ...
}

Webpack loading and preprocessing

Using the included graphql-tag/loader it is possible to maintain query logic that is separate from the rest of your application logic. With the loader configured, imported graphQL files will be converted to AST during the webpack build process.

Example webpack configuration

{
  ...
  loaders: [
    {
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader'
    }
  ],
  ...
}

Create React App

Preprocessing GraphQL imports is supported in create-react-app >= v2 using evenchange4/graphql.macro.

For create-react-app < v2, you'll either need to eject or use react-app-rewire-inline-import-graphql-ast.

Testing

Testing environments that don't support Webpack require additional configuration. For Jest use jest-transform-graphql.

Support for fragments

With the webpack loader, you can import fragments by name:

In a file called query.gql:

fragment MyFragment1 on MyType1 {
  ...
}

fragment MyFragment2 on MyType2 {
  ...
}

And in your JavaScript:

import { MyFragment1, MyFragment2 } from 'query.gql'

Note: If your fragment references other fragments, the resulting document will have multiple fragments in it. In this case you must still specify the fragment name when using the fragment. For example, with @apollo/client you would specify the fragmentName option when using the fragment for cache operations.

Warnings

This package will emit a warning if you have multiple fragments of the same name. You can disable this with:

import { disableFragmentWarnings } from 'graphql-tag';

disableFragmentWarnings()

Experimental Fragment Variables

This package exports an experimentalFragmentVariables flag that allows you to use experimental support for parameterized fragments.

You can enable / disable this with:

import { enableExperimentalFragmentVariables, disableExperimentalFragmentVariables } from 'graphql-tag';

Enabling this feature allows you declare documents of the form

fragment SomeFragment ($arg: String!) on SomeType {
  someField
}

Resources

You can easily generate and explore a GraphQL AST on astexplorer.net.

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.