Apollo Client, gql from graphql-tag or @apollo/client

Question

I have some queries with

import { gql } from '@apollo/client'; // from Apollo Client 3

and other with:

import gql from 'graphql-tag';

What's the difference between using one or another?

I had to change the one imported from apollo/client to graphql-tag because some problems with MockedProvider utility for testing from Apollo Client, but, why?

Answer 1

The first imports the helpers that the apollo client library rexports and the second imports the helpers directly. I'd use the first way, as it ensures you use the version that apollo client expects. The second one can give you a different version if you have graphql-tag as a direct dependency or another dependency requires it in a different version.

Answer 2

The difference between import { gql } from '@apollo/client' and import gql from 'graphql-tag' lies in the libraries they originate from and how they are used in modern Apollo Client projects.

import { gql } from '@apollo/client'

This import statement is from Apollo Client 3, which integrates the gql tag within its own package. Using this method is recommended when you are working with Apollo Client 3 or later versions because it consolidates all necessary functionalities into one package, simplifying the setup and dependency management.

import gql from 'graphql-tag'

This import statement is from the graphql-tag library, which was commonly used in conjunction with earlier versions of Apollo Client (prior to Apollo Client 3). The graphql-tag library is a separate package that allows you to parse GraphQL query strings into the format needed by Apollo Client.

Conclusion

1. for modern Apollo Client projects (version 3 and above), prefer using:

import { gql } from '@apollo/client';:

This keeps your dependencies streamlined and leverages the latest features and improvements from Apollo Client.

2. If you're working with older codebases or versions of Apollo Client, you might still encounter:

   import gql from 'graphql-tag';