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

2335 questions
8
votes
1 answer

How to create nested nodes in one mutation?

Hi I am trying to write data on my https://www.graph.cool/ db with a mutation. My project is a React web-app and I am using Apollo as graphql client and graphql-tag npm package as template literal parser. The problem is that i don't know how to…
Alessandro Annini
  • 1,531
  • 2
  • 17
  • 32
8
votes
2 answers

After a mutation, how do I update the affected data across views?

I have both the getMovies query and addMovie mutation working. When addMovie happens though, I'm wondering how to best update the list of movies in "Edit Movies" and "My Profile" to reflect the changes. I just need a general/high-level overview, or…
atkayla
  • 8,143
  • 17
  • 72
  • 132
7
votes
2 answers

Invalid hook call. Hooks can only be called inside of the body of a function component when i call useQuery in useEffect

I am using apollo-graphql in my react project and i am getting error of Invalid hook call. Hooks can only be called inside of the body of a function component Here is my code for this import React, { useEffect, useState, useCallback } from…
Ratnabh kumar rai
  • 1,426
  • 4
  • 21
  • 48
7
votes
1 answer

Apollo readQuery, get data from cache

I'm trying to get data from Apollo cache. I know that data is there because in Apollo dev tools specified records are available. In my react app I making a simple click and set Id which later passes to the query. Result from client.readQuery(...) is…
greg
  • 199
  • 2
  • 10
7
votes
1 answer

Apollo Client - FetchMore with useLazyQuery, variables do not update (for offset pagination)

Intended outcome: We did a pagination implementation, following the apollo docs (https://www.apollographql.com/docs/react/pagination/offset-based/). Using a read/merge function We expect that the read function is called with the new variables, once…
BrechtArnou
  • 81
  • 3
7
votes
1 answer

Multiple ApolloLink based on context

I want to implement a way to switch over different links based on the context set in graphql query. What I did so far is something like this which is working fine but doesn't seem to be a nice solution over time. const link = ApolloLink.from([ …
Siamak Motlagh
  • 5,028
  • 7
  • 41
  • 65
7
votes
1 answer

How can you retrieve a date field in Apollo Client from a query as a Date and not a string?

Using the following graphql: scalar Date type MyModel { id: ID! date: Date! } query MyModels { myModels { id date } } type Query { myModel: [MyModel!] } and resolvers: import { DateTimeResolver } from 'graphql-scalars' const…
Garrett
  • 11,451
  • 19
  • 85
  • 126
7
votes
1 answer

Apollo Boost MockedProvider returns empty object when using fragment on query

I have a working test using Apollo Boost MockedProvider, Jest and React Testing Library that, when I change the returned fields to a graphQL fragment it stops working. What am I missing? TicketGql.js export default class TicketGql { static…
vborges
  • 85
  • 1
  • 8
7
votes
5 answers

how to use ant design form initialValue

Which is right using antd Form initialValue? I want to know that if antd form initialValue is using to set initial data or just to show value when the form doesn't have value. const Component = ({ id }) => { const initialName = 'John' const {…
YOUNGHO KIM
  • 73
  • 1
  • 1
  • 3
7
votes
3 answers

How to prevent useQuery for running when state changes?

I am using React Apollo to get data from my server. When my page loads I am using useQuery to retrieve the data. This works fine. The problem is when I make a change to the search form, this updates the state which causes an unwanted re-render which…
AngularBoy
  • 1,715
  • 2
  • 25
  • 35
7
votes
2 answers

How to useState and useQuery in Apollo/GraphQL and React?

I'm struggling to understand how to best organise my code to set initial useState() in React, while using GraphQL and Apollo to bring in the data. This is my code. As you can see I want to see a part of the 'data' to set the initial state, but when…
unicorn_surprise
  • 951
  • 2
  • 21
  • 40
7
votes
2 answers

Can I override Apollo Client headers from individual queries in my components?

When I initialize my Apollo client, I make an Apollo Link with the header hello: "world". Is there a way to override the hello header value from a component using hooks? I thought this would work but it still uses the Client…
Aej11a
  • 243
  • 1
  • 11
7
votes
3 answers

React js - problem with proxy for web socket link in react

I am setting up the proxy server using setupProxy for my react app using graphql as backend which is running on a different part, doing so The HTTP link proxy is working fine but WebSocket link proxy is giving me an error For solving the problem I…
EvilsEmpire
  • 146
  • 2
  • 13
7
votes
1 answer

How to apply a mutation using Formik?

I have been trying to come up with a way implement the submit function of the react-apollo component. Found some examples out there that seem to be an overkill for this simple task, including this and this. Since I am fresh programmer…
Tiago
  • 1,794
  • 1
  • 9
  • 16
7
votes
0 answers

How to mock client.readQuery from Apollo 2 in Jest

There's a component which I am using the cache that I created in apollo, stored inside the client. At some point, as a callback from an input, I do the following call: const originalName = client.readQuery({ query: NamesCached…
Ruffeng
  • 537
  • 7
  • 23
1 2 3
…
99 100