apollo-client | production ready caching GraphQL client for every UI | GraphQL library

 by   apollographql TypeScript Version: 2.6.10 License: MIT

kandi X-RAY | apollo-client Summary

kandi X-RAY | apollo-client Summary

apollo-client is a TypeScript library typically used in Web Services, GraphQL, React Native, Angular, React, Apollo applications. apollo-client has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL.

            kandi-support Support

              apollo-client has a medium active ecosystem.
              It has 18770 star(s) with 2576 fork(s). There are 294 watchers for this library.
              It had no major release in the last 12 months.
              There are 467 open issues and 4249 have been closed. On average issues are closed in 99 days. There are 46 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of apollo-client is 2.6.10

            kandi-Quality Quality

              apollo-client has 0 bugs and 0 code smells.

            kandi-Security Security

              apollo-client has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              apollo-client code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              apollo-client is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              apollo-client releases are available to install and integrate.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of apollo-client
            Get all kandi verified functions for this library.

            apollo-client Key Features

            No Key Features are available at this moment for apollo-client.

            apollo-client Examples and Code Snippets

            Apollo mutate without Hook in React custom Hook
            JavaScriptdot img1Lines of Code : 15dot img1License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import { useApolloClient } from '@apollo/client'
                        variables: {
                            Input: input,
                    .catch((error) =>
            Problems accessing data from a GraphQL query in Javascript with Svelte
            JavaScriptdot img2Lines of Code : 24dot img2License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import { client } from '../apollo.js';
            import { onMount } from "svelte";
            import { gql } from '@apollo/client'
            export const COMPANY_LIST = gql`
                query {
            async functio
            Apollo Client Reactive variables - not trigger re render after updating the value
            JavaScriptdot img3Lines of Code : 36dot img3License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            export const cache: InMemoryCache = new InMemoryCache({
              typePolicies: {
                Query: {
                  fields: {
                      return colorVar();
            export const colorVar = cache.makeVar('red')
            Version mismatch when installing vue-apollo in Vue 3.0 application
            Lines of Code : 4dot img4License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            npm install --save vue-apollo graphql apollo-boost
            yarn add vue-apollo graphql apollo-boost
            Property 'setLink' is missing in type 'ApolloClient' but required in type 'ApolloClient
            TypeScriptdot img5Lines of Code : 9dot img5License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import { ApolloClient } from 'apollo-client'
            import { InMemoryCache, NormalizedCacheObject } from 'apollo-cache-inmemory'
            import {
            } from '@apollo/client'
            Best practice for Next.js data fetching inside a component
            JavaScriptdot img6Lines of Code : 159dot img6License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import React from 'react'
            import { useQuery, gql } from '@apollo/client'
            import close from '../public/close.svg'
             * Just a typical menu you might see on a CMS-driven site. It takes in a couple of props to move state around.
            Invariant violation when using react apollo hooks alongside query components
            JavaScriptdot img7Lines of Code : 19dot img7License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import {
              ApolloProvider as ApolloProvider2,
            } from '@apollo/react-components'
            import {
            } from '@apollo/client'
            React Apollo Client - modify query data before it goes to cache
            Lines of Code : 11dot img8License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            const modifyDataLink = new ApolloLink((operation, forward) => {
              return forward(operation).map(response => {
                // Modify response.data...
                return response;
            // use with apollo-client
            const link = modifyDataLink.conca

            Community Discussions


            Data fetching from graphql server with ApolloClient doesn t work. How can I fix it?
            Asked 2022-Mar-27 at 11:59

            Here, I am creating new ApolloClient with graphql



            Answered 2022-Mar-27 at 11:59

            the problem is with you are using customHook and that is the promise for graphql what it does is return the instance of that current runtime and it is undefined at that time all you can do is simply use in the component that you want to use why are you complexing things.

            Source https://stackoverflow.com/questions/71635906


            mock-apollo-client returnig "Response not successful: Received status code 401"
            Asked 2022-Mar-25 at 08:54

            I'm writing a toy app to learn more about Serverless Framework and AWS AppSync etc. I'm trying to do TDD as much as possible. I'm using mock-apollo-client to mock the ApolloClient, and I've run into a problem. When trying to write a test to make sure the arguments to the query are passed, the test always returns a 401 Unauthorized error. It seems as though the real end point is still being called, because when a valid x-api-key is added to the instantiation of the ApolloClient, the test returns the real value from the AppSync server, and not the mock value I'm expecting. I'm using a mock, not spy, so I'm not expecting the real end point to actually be hit. Furthermore When I do add a valid x-api-key the test fails because the function is never called.



            Answered 2022-Mar-25 at 08:52

            mock-apollo-client always use the with ApolloProvider, so that you pass the mock apollo client via React context Provider to descendant components.

            However, your code cannot pass the mock apollo client to the component in this way. Your code initiates requests directly from the Apollo Client. We need to intercept these GraphQL requests. There are several ways to do this such as msw. However, I'll continue to use the mock-apollo-client library to demonstrate.

            You need to mock ApolloClient class of the @apollo/client module. We need to use Mocking Partials, we don't want to mock other things exported from @apollo/client. Since the mock-apollo-client library already provides createMockClient function to create mocked apollo client, we don't need to mock by ourself.

            An working example:


            Source https://stackoverflow.com/questions/71612556


            Apollo Client "Named export 'remove' not found"
            Asked 2022-Mar-12 at 09:45

            I'm attempting to create an apollo client plugin for a Nuxt 3 application. It's currently throwing an error regarding a package called ts-invariant:



            Answered 2022-Jan-07 at 01:52

            Solved by including @apollo/client and ts-invariant/process into the nuxt build transpile like so:

            Source https://stackoverflow.com/questions/70615613


            apollo-client in next.js with `next-with-apollo` VS the approach shown in next.js docs FAQ (no use of `getDataFromTree`)
            Asked 2022-Mar-08 at 07:58

            Contrast in "apollo-client in next.js" approaches chosen in next-with-apollo npm library and the approach shown in next.js docs.

            The link of approach chosen by next.js for apollo client: https://github.com/vercel/next.js/blob/canary/examples/with-apollo/lib/apolloClient.js

            In next.js doc approach:

            • no third-party library next-with-apollo is used
            • no get-data-from-tree is used
            • Moreover i found this approach more meaningful and elegant inner-working of client side redering and SSR of apollo-client in next.js. I strongly like this

            Some cons in next-with-apollo approach

            • in next-with-apollo docs, it is stated that in withApollo API, the parameter getDataFromTree of intialState defaults to undefined by implementaion and its stated "It's recommended to never set this prop, otherwise the page will be a lambda without Automatic Static Optimization "
            • get-initial-props is used which is not recommended by next.js for optimization reasons general thing. Why to consider third party library if there is non-third party way and suggested officially unless it has drawbacks?

            It made me really curious to see many are using next-with-apollo and rarely seen the usage of the approach shown in next.js docs? I'm curious whether approach in next.js docs has any drawbacks (which i strong think of not having any)?

            • does the approach shown in next.js has some drawbacks?
            • does next-with-apollo has more efficiencies? if so what r those more efficiencies for which it is wise not to choose next.js doc approach. I wanna be sure that if i'm rejecting next.js doc approach (currently im choosing it) i'm not doing any wrong

            So which is better for both client-side data fetching and server-data fetching to support both CSR and SRR?



            Answered 2021-Aug-20 at 17:34

            I found the answer by posting in next.js community:

            Here it goes:

            next.js doc's apollo examples avoid using getDataFromTree because it traverses the react tree twice in order to trigger all the queries and collect their result afterwards.

            The drawback of using the approach on the next.js doc's apollo examples is since you don't use getDataFromTree, you have no way to know which queries your inner components are using. So you need to remember to prefetch everything you need on getStaticProps/getServerSideProps and match the exact same queries/variables

            next.js doc's apollo examples way is recommended instead of getInitialProps so I would always use them unless one has some very specific reason not to

            Source https://stackoverflow.com/questions/68848346


            Apollo-client without graphql endpoint
            Asked 2022-Feb-16 at 17:53

            When I see sample apps which uses Apollo-client I see following constructor.When I read HttpLink document, it seems that graphql endpoint must be set as uribut in following code, I couldn't find them.



            Answered 2022-Feb-16 at 17:53

            The HttpLink constructor option uri has a default value of /graphql. So as long as that is the correct path it will work without passing a uri option into the constructor.

            So your example code:

            Source https://stackoverflow.com/questions/71139512


            Webpack (in prod) bundles give error: TypeError: (0 , tm.useEffect) is not a function...why?
            Asked 2022-Jan-05 at 06:10

            My React app is using Webpack + Babel. When I compile in development everything works perfectly well.

            When I bundle for production ("npm run build") and upload the bundle in prod, an error appear in the console:

            Why? I found a similar question but didn't find an answer : related stackoverflow question

            Here's my webpack.prod.js config:



            Answered 2021-Dec-30 at 17:37

            Pointing an alias to a node module is an error. Just remove your resolve entry and everything should run fine.

            Source https://stackoverflow.com/questions/70515669


            How to solve my project dependencies vulnerability (Webpack, Babel, React)
            Asked 2021-Dec-13 at 23:38

            I have a React project using Babel and Webpack. Recently I realized that my webpack wasn't "hot loading" anymore when I make a change in my project files. (this cause me some trouble, anyhow)

            I audited my npm dependencies and had 60 vulnerabilities with 9 high and 2 critical. I thought this should be taken care of.

            Now, I tried to install the package that seems to broke things (using npm audit) but to no avail. I still got 31 vulnerabilities even after trying to install a different version of React Script.

            Now, if I try to start my app, webpack doesn't compile saying "Cannot find module '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining'"

            I tried to install the Babel dependencies but every time a new one comes up. I know Babel just recently updated to 7.16 (October 31, 2021). Is this why my problems started?

            How should I go about resolving all those dependencies issues? I feel it's a never ending instance of install a new packages that just break another one...




            Answered 2021-Dec-13 at 23:38

            QUICK UPDATE

            I made progress over my dependencies vulnerabilities. The main issue was a package that was interfering with the others. But I didn't clean my packages in a long time so it was impossible to know which one.

            Here's my process: (to check what needs to be updated)

            Source https://stackoverflow.com/questions/70329919


            How to prevent that my Apollo Client error handler (onError, error link) is called twice for the same error?
            Asked 2021-Oct-19 at 01:22

            I'm trying to implement a global error handling for a React application, which uses Apollo Client 3.4.8.

            I'm setting up the App and Apollo like this:



            Answered 2021-Oct-19 at 01:22

            So, the issue here is that we can't replace a Link in the chain and when doing this:

            client.setLink(from([errorLink, client.link]));

            we could be adding multiple error handlers.

            The solution is to apply again all the links we need + the new error handler we want to set

            Source https://stackoverflow.com/questions/68879724


            Getting "TypeError ctx[0].data is undefined" in Svelte
            Asked 2021-Sep-06 at 18:11

            I'm trying to get started with both GraphQL and Svelte using Apollo Server, but all I get is this error "ctx[random number].data is undefined". I also tried svelte {#async} but got the same error. What I'm doing wrong and how to make it works?



            Answered 2021-Sep-06 at 18:11

            Follow the example on Svelte Apollo Client's page

            Source https://stackoverflow.com/questions/69075545


            Apollo Graphql when refreshing token doesn't update useQuery
            Asked 2021-Sep-01 at 17:26

            I'm facing next problem: I have a useQuery hook for getting usersData

            GET_USER_INFO useQuery ...


            Answered 2021-Sep-01 at 17:26

            You can use the retry link to run the query again.

            You should chain your links in a way that the retry link is the most outer link so that you can wait for your error link to fetch the token. Check out the custom strategies, here you could react to a specific status code in the error object or listen to a custom property, that the error link could attach to the operation object. This way you can even prevent a refetch if the token refresh failed (e.g. because the refetch token also timed out).

            The links are also all open source so if chaining them doesn't really work for you, you could also develop your own refetch+retry link by combining the code of both links.

            Source https://stackoverflow.com/questions/69014530

            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install apollo-client

            You can download it from GitHub.


            All Apollo Client documentation, including React integration articles and helpful recipes, can be found at: https://www.apollographql.com/docs/react/. The Apollo Client API reference can be found at: https://www.apollographql.com/docs/react/api/apollo-client/. Learn how to use Apollo Client with self-paced hands-on training on Odyssey, Apollo's official learning platform: https://odyssey.apollographql.com/.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone apollographql/apollo-client

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link

            Consider Popular GraphQL Libraries


            by parse-community


            by graphql


            by apollographql


            by facebook


            by graphql

            Try Top Libraries by apollographql


            by apollographqlTypeScript


            by apollographqlJavaScript


            by apollographqlSwift


            by apollographqlKotlin


            by apollographqlTypeScript