Questions tagged [react-apollo]

React Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the React framework. React Apollo may be used in any context that React may be used. In the browser, in React Native, or in Node.js when you want to do server-side rendering.

react-apollo tag should be used for questions that are about the usage of the react-apollo ApolloClient container.

It should be included with the apollostack (and related) tags to clarify that this is the client wrapper being used.

It alleviates the need to use the , which should not be used, unless a person who knows nothing about react-apollo is likely to be able to answer the question.

Related tags

2126 questions
21
votes
3 answers

Deleting Apollo Client cache for a given query and every set of variables

I have a filtered list of items based on a getAllItems query, which takes a filter and an order by option as arguments. After creating a new item, I want to delete the cache for this query, no matter what variables were passed. I don't know how to…
20
votes
5 answers

How to force Apollo Query component to re-run query when parent component re-renders

I'm using Apollo Client's within a component that is re-rendered when state is changed within a lifecycle method. I wish to have my component re-run the query because I know that data has changed. It appears that Query component is…
Andrei R
  • 3,282
  • 5
  • 23
  • 26
20
votes
5 answers

GraphQL - How to respond with different status code?

I'm having a trouble with Graphql and Apollo Client. I always created different responses like 401 code when using REST but here I don't know how to do a similar behavior. When I get the response, I want it to go to the catch function. An example of…
slorenzo
  • 3,386
  • 2
  • 27
  • 44
19
votes
2 answers

Apollo 3 pagination with Field Policies

Could someone provide an example of pagination implemented with Apollo Client 3.0 Field Policies. I've been following the example from the docs to implement infinite scroll but in my console I'm getting the following warning: The updateQuery…
Aleksandr Fomin
  • 699
  • 5
  • 18
19
votes
1 answer

Apollo Query with Variable

Just a basic apollo query request this.client.query({ query: gql` { User(okta: $okta){ id } }` }).then(result => { this.setState({userid: result.data.User}); console.log(this.state.userid.id) }).catch(error => { …
19
votes
1 answer

Apollo Optimistic UI does not work in Mutation Component?

I am using component which has Render Prop API & trying to do Optimistic Response in the UI. So far I have this chunk in an _onSubmit function - createApp({ variables: { id: uuid(), name, link }, optimisticResponse: { …
deadcoder0904
  • 3,758
  • 1
  • 27
  • 91
19
votes
2 answers

Host: localhost. is not in the cert's altnames

I'm getting the below error while doing server-side rendering. RENDERING ERROR: { [Error: Network error: request to https://api-dev.xyz.io/graphql failed, reason: Hostname/IP doesn't match certificate's altnames: "Host: localhost. is not in the…
manish keer
  • 1,277
  • 1
  • 11
  • 25
18
votes
3 answers

Apollo duplicates first result to every node in array of edges

I am working on a react app with react-apollo calling data through graphql when I check in browser network tab response it shows all elements of the array different but what I get or console.log() in my app then all elements of array same as the…
Bhaumik Gandhi
  • 193
  • 1
  • 6
18
votes
1 answer

How to set fetchPolicy globally on apollo-client queries?

I have a few mutations that should trigger some refetchQueries, but I need those queries to have a fetchPolicy other than the default. Is there a way to set fetchPolicy globally instead of per query? So to avoid setting fetchPolicy on each query.
Eduardo Polmann
  • 317
  • 3
  • 8
17
votes
2 answers

Apollo Client (React): Handling unexpected errors

I have been reviewing the Apollo documentation but I do not see information of how to go about handling server errors in the Apollo client. For example, suppose that the server either: Times out Becomes unreachable Unexpectedly fails How…
dipole_moment
  • 3,489
  • 2
  • 30
  • 48
17
votes
2 answers

How do you dynamically control react apollo-client query initiation?

A react component wrapped with an apollo-client query will automatically initiate a call to the server for data. I would like to fire off a request for data only on a specific user input. You can pass the skip option in the query options - but this…
Nick McIntosh
  • 191
  • 1
  • 5
16
votes
1 answer

Next Js Custom Routes and SSR

I am using apollo with next and recently I noticed that custom routes breaks SSR. Usually if you navigate through pages apollo caches the query and when you are on the page the next time, it serves everything from cache. However with custom routes,…
Yasin Yaqoobi
  • 1,568
  • 2
  • 22
  • 34
16
votes
6 answers

Multiple Queries/Mutation in Apollo 2.1

I need some help using the new Query and Mutation component in Apollo 2.1, especially with multiple queries and mutations. I have the following problems: I have a graphql request that depends on a previous graphql result, how can I deal with…
brunodahora
  • 231
  • 1
  • 3
  • 6
16
votes
2 answers

How to run a mutation on mount with React Apollo 2.1's Mutation component?

We are currently moving from Relay to React Apollo 2.1 and something I'm doing seems fishy. Context: Some components must only be rendered if the user is authenticated (via an API key), so there is an Authenticator component guarding the rest of the…
astorije
  • 2,526
  • 2
  • 24
  • 39
16
votes
4 answers

Reset store after logout with Apollo client

I'm trying to reset the store after logout in my react-apollo application. So I've created a method called "logout" which is called when I click on a button (and passed by the 'onDisconnect' props). To do that I've tried to follow this example…
Putxe
  • 766
  • 1
  • 12
  • 22