Stack Overflow
Stack Overflow

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
15
votes
2 answers

Is it possible to prevent `useLazyQuery` queries from being re-fetched on component state change / re-render?

Currently I have a useLazyQuery hook which is fired on a button press (part of a search form). The hook behaves normally, and is only fired when the button is pressed. However, once I've fired it once, it's then fired every time the component…
user11754604
  • 183
  • 1
  • 1
  • 5
15
votes
1 answer

Apollo-client (react) - Update on create mutation - "Can't find field Fund({}) on object (ROOT_QUERY)"

Using: "react-apollo": "^1.4.3" In the parent component I query using GraphQL a parent node 'Fund' with children 'fundQuarterlyMetric'. This returns data in the following format: { id name ... fundQuarterlyMetrics (orderBy:…
Blackstone4
  • 631
  • 8
  • 20
14
votes
2 answers

Property 'setLink' is missing in type 'ApolloClient' but required in type 'ApolloClient

I am setting up a new typescript project with react and apollo client. I am attempting to wire in the client like so: const client = new ApolloClient({ cache: new InMemoryCache(), link: new HttpLink({ uri: 'http://localhost:3000/graphql', …
Eric H
  • 1,171
  • 2
  • 12
  • 28
14
votes
5 answers

Trying call useQuery in function with react-apollo-hooks

I want to call useQuery whenever I need it, but useQuery can not inside the function. My trying code is: export const TestComponent = () => { ... const { data, loading, error } = useQuery(gql(GET_USER_LIST), { variables: { data: { …
ko_ma
  • 651
  • 2
  • 7
  • 18
14
votes
1 answer

How to correctly redirect after catching authentication failure with Apollo and React

I'm writing a react app that uses apollo-client and I'm using apollo-link-error to catch authentication errors globally. I'm using createBrowserHistory for browser history manipulation and redux to manage my app state. On authentication error I want…
bpylearner
  • 438
  • 3
  • 12
14
votes
1 answer

Unsubscribe subscription in Apollo Client

In my component, I have this code: componentDidMount () { // Setup subscription listener const { client, match: { params: { groupId } } } = this.props client.subscribe({ query: HOMEWORK_IN_GROUP_SUBSCRIPTION, variables: { groupId }, …
V0iDiFiER
  • 145
  • 1
  • 1
  • 4
13
votes
2 answers

How to fix `Warning: Text content did not match. Server: "Some Data" Client: "Loading..."`

I'm getting this error on initial load of my SSR application: Warning: Text content did not match. Server: "SOME DATA" Client: "Loading..." How to initialize client side of the app without setting loading flag to true? I’m setting up a SSR with…
rreckonerr
  • 347
  • 3
  • 11
13
votes
3 answers

Is graphql's ID type necessary if I've set an unique identifier with dataIdFromObject in Apollo Client

I'm using graphql + mysql + react-apollo and here's one of the graphql type for User table: type User { id: ID! name: String! } My issue with ID scalar type in graphql is that it is returned as a string when primary keys are int in mysql and it…
RedGiant
  • 4,036
  • 6
  • 44
  • 117
13
votes
0 answers

"this.getClient(...).watchQuery is not a function" - remote schema stitching with Apollo 2 / Next.js

So I'm attempting to stitch multiple remote GraphCMS endpoints together on the clientside of a Next.js app, and after trying/combining about every example on the face of the internet, I've gotten it to a place that's worth asking about. My…
Will Meier
  • 191
  • 9
13
votes
5 answers

How to use Apollo Client + React Router to implement private routes and redirection based on user status?

I am using React Router 4 for routing and Apollo Client for data fetching & caching. I need to implement a PrivateRoute and redirection solution based on the following criteria: The pages a user is permitted to see are based on their user status,…
AnApprentice
  • 97,752
  • 174
  • 583
  • 971
12
votes
1 answer

CORS issue with using localhost:3000 to access graphql API at a different URL

I have searched all over StackOverflow and saw similar questions but have not found a working solution. Wondering if anyone has a working solution? I am developing a create react app on localhost:3000 and trying to access through my Apollo Client a…
Elaine
  • 183
  • 3
  • 9
12
votes
2 answers

Apollo-client with parcel warnings

Have been trying to setup apollo-client with parcel for my react app. Things work fine but in the console, there are plenty of warnings regarding missing source files in node_modules/apollo-client in my CI pipeline. Have tried clearing yarn cache,…
Abhijeet
  • 637
  • 5
  • 14
12
votes
0 answers

Queries overwriting with missing fields in the Apollo cache

I have a situation where I sometimes want to query a list of many objects with a few fields, and sometimes only one object with many fields. As an example, consider these two queries: A query with a many objects and few fields: query { …
jorgen
  • 2,791
  • 3
  • 25
  • 39
12
votes
2 answers

Apollo writeFragment not updating data

In react-apollo 2.0.1 I have a graphql type that looks like this: type PagedThing { data: [Thing] total: Int } When doing the following writeFragment client.writeFragment({ id, fragment: gql` fragment my_thing on Thing { …
FabioCosta
  • 2,734
  • 2
  • 20
  • 48
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
  • 227
  • 1
  • 2
  • 10
1 2
3
…
99 100