Questions tagged [apollo-client]

Apollo Client is a JavaScript library for building client UIs that fetch data using GraphQL.

Apollo Client is the best way to use GraphQL to build client applications. The client is designed to help you quickly build a UI that fetches data with GraphQL, and can be used with any JavaScript front-end.

Apollo Client

Repository

3353 questions
12
votes
1 answer

Does useQuery run on server-side rendering?

I'm new to Next.js and have some questions about client-side rendering and server-side rendering in Next.js I see there are two ways to fetch data on Next.js. One of them is to use the useQuery hook but that is only callable on the React component…
Tu Le Thanh
  • 542
  • 1
  • 6
  • 18
12
votes
4 answers

Apollo Client client.readQuery returning null when data is in the cache

This must be user error, but I've got an app with a simple currentUser query that looks at a JWT for an id, looks it up, and returns the appropriate user. I can look at devtools and see that it's in the cache as __ref:User:19 export const…
CrustyRatFink
  • 464
  • 1
  • 5
  • 15
12
votes
1 answer

Testing useSubscription apollo hooks with react

Testing the useSubscription hook I'm finding a bit difficult, since the method is omitted/not documented on the Apollo docs (at time of writing). Presumably, it should be mocked using the from @apollo/react-testing, much like the…
12
votes
4 answers

multiple usequeries in a single component

I am unable to get the data by using the useQuery in the below mentioned way const { data:data1 } = useQuery(Get_Doctor); const { loading, error,data } = useQuery(GET_Branch);
Monika
  • 149
  • 1
  • 2
  • 8
12
votes
1 answer

How to approach a GraphQL query that returns a boolean value?

Need to check whether an email is available or taken during the user sign-up process. The goal is to quickly query, using GraphQL, the API server and have it tell us if the email is available or taken. What is the general best practice on a simple…
Chad Taylor
  • 337
  • 1
  • 3
  • 9
12
votes
4 answers

How to call a GraphQL query/mutation from an Express server backend?

My frontend is localhost:3000, and my GraphQL server is localhost:3333. I've used react-apollo to query/mutate in JSX land, but haven't made a query/mutation from Express yet. I'd like to make the query/mutation here in my…
Chance Smith
  • 1,211
  • 1
  • 15
  • 32
12
votes
1 answer

How to logout the user on apollo-link-error in react-native app?

To navigate around in my react-native app, I am using "react-navigation". With the code below, I can successfully intercept all necessary errors that are coming from the server. const linkError = onError(({ graphQLErrors, networkError }) => { if…
SaidAkh
  • 1,661
  • 4
  • 15
  • 28
12
votes
1 answer

How to implement auto refresh token in graphql for jwt based authentication?

I am trying to figure out this scenario for my JWT based authentication in Apollo based graphql server (2.0) . Basically after login a user gets accessToken and refreshToken from server. AccessToken gets expired after certain period of time and…
WitVault
  • 23,445
  • 19
  • 103
  • 133
12
votes
1 answer

Apollo offline first support: Service Worker or Persisted Cache?

I have a react app that use apollo as a grapql client. The app now need offline support for a subset/subapp. There is a service worker (thanks to workbox and webpack) that do the pre-caching of the assets of the app and works good. Now there is a…
12
votes
2 answers

Angular Apollo Error Handling

Hi everyone I am a bit stuck on a problem with apollo-angular and apollo-link-error. I've tried a few different ways and I can't seem to catch any errors client-side in my angular web app. I posted my attempts below. Any suggestions or an extra set…
Galactic Ranger
  • 851
  • 3
  • 14
  • 30
12
votes
1 answer

How to deal with nested state in apollo-link-state (similar to Redux's combineReducers)

If we look at the todos example, imagine that the application had multiple views (a TodoList page and another page). So instead of "todos" directly referring to an array of todo items, at the top level of the state/store/cache it would actually…
Soren
  • 307
  • 1
  • 2
  • 11
12
votes
1 answer

Why do GraphQL fragments need __typename in queries?

I can't find or I am looking in the wrong place for any documentation on how fragments are matched. When I use the vanilla Apollo client if I turn off the option of addTypename when I use fragments I get a warning heuristic fragment matching going…
Barry
  • 1,800
  • 2
  • 25
  • 46
11
votes
1 answer

Apollo useQuery() throws Error: ECONNREFUSED when running async test in React Testing Library

UPDATE: Tried upgrading to React 18 and RTL 13 but that did not fix the issue. React 16.4.0 react-scripts 5.0.1 Apollo Client 3.5.9 React Testing Library 12.1.2 I’m having chronic issues with testing React components that call Apollo useQuery()…
11
votes
2 answers

Cache data may be lost when replacing the my field of a Query object

this my code const NewVerificationCode = () => { const { loading, error, data = {}, refetch } = useQuery(CONFIRMATION_CODE, { skip: true, onError: (err) => {}, }); console.log(loading, error, data); if (loading || error) { …
Edgar
  • 6,022
  • 8
  • 33
  • 66
11
votes
4 answers

GraphQL - Apollo Client without using hooks?

I am attempting to use the Apollo GraphQL Client for React Native. However, in some parts of my app I need to do a mutation on the GraphQL data, in such a way that the interface should not be exposed to the user. For instance, on my sign up page, I…
Reid
  • 4,376
  • 11
  • 43
  • 75