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

apollo-link-state cache.writedata results in Missing field warning

When I call a mutation on my client I get the following warning: writeToStore.js:111 Missing field updateLocale in {} This is my stateLink: const stateLink = withClientState({ cache, resolvers: { Mutation: { updateLocale: (root, {…
Rob Indesteege
  • 548
  • 1
  • 8
  • 19
11
votes
1 answer

React Apollo: Dynamically update GraphQL query from Component state

I have a component that shows results from a GraphQL query using the react-apollo decorator syntax. The query accepts a parameter, which I want to set dynamically based on component state. Consider the following simplified example: import * as React…
duncanhall
  • 11,035
  • 5
  • 54
  • 86
10
votes
1 answer

How do I reset the useMutation hook of Apollo Client

I am developing a React form that's tied to a GraphQL mutation using the useMutation of Apollo Client. On the server, I perform some validation and in case of errors, I reject the mutation. On the client-side, I use the error object to receive the…
Martin Devillers
  • 17,293
  • 5
  • 46
  • 88
10
votes
2 answers

apollo's MockedProvider doesn't warn clearly about missing mocks

I'm making unit tests for React components using apollo hooks (useQuery, useMutation), and in the tests I mock the actual queries with apollo's MockedProvider. The problem is that sometimes, my mock doesn't match the query actually made by the…
Quentin
  • 1,085
  • 1
  • 11
  • 29
10
votes
1 answer

"Rendered more hooks than during the previous render" error when the initial value for the hook is a query result from a database

I'm using React's hook and I want to have a value that is retrieved from the database as the initial value. However, I'm getting the following error: Invariant Violation: Invariant Violation: Rendered more hooks than during the previous…
Kevvv
  • 3,655
  • 10
  • 44
  • 90
10
votes
1 answer

refetching a query with react-apollo: why is `loading` not true?

I'm trying Apollo and using the following relevant code: const withQuery = graphql(gql` query ApolloQuery { apolloQuery { data } } `); export default withQuery(props => { const { data: { refetch, loading, apolloQuery }, } = props; …
Silly Freak
  • 4,061
  • 1
  • 36
  • 58
10
votes
2 answers

Dealing with ag grid react and rendering a grid of checkboxes

I'm messing with ag-grid, react-apollo, and everything seems to be working fine. The goal here is to click a check box and have a mutation / network request occur modifying some data. The issue i'm having is that it redraws the entire row which can…
Karan
  • 1,141
  • 2
  • 19
  • 42
10
votes
1 answer

Organization structure for fragment composition in large react-apollo apps

I'm using Apollo Client and React and I'm looking for a strategy to keep my component and component data requirements colocated in such a way that it can be accessible to parent/sibling/child components that might need it for queries and mutations.…
Donovan Hiland
  • 1,439
  • 11
  • 18
10
votes
2 answers

React, Apollo 2, GraphQL, Authentication. How to re-render component after login

I have this code: https://codesandbox.io/s/507w9qxrrl I don't understand: 1) How to re-render() Menu component after: this.props.client.query({ query: CURRENT_USER_QUERY, fetchPolicy: "network-only" }); If I login() I expect my Menu component…
user4412054
10
votes
3 answers

How to use a mocked data with react-apollo for tests

I'm using react-apollo to build a client that consumes a GraphQL API, however, I'm very stuck on testing. What I want is to mock the server so I can easily test the application without needing to make network calls. I've found some pointers on how…
Carlos Martinez
  • 4,350
  • 5
  • 32
  • 62
10
votes
2 answers

Remove read-only fields before mutation in GraphQL

I've got a type called Article in my schema: type Article { id: ID! updated: DateTime headline: String subline: String } For updates to it, there's a corresponding input type that is used by a updateArticle(id: ID!, article: ArticleInput!)…
amann
  • 5,449
  • 4
  • 38
  • 46
9
votes
2 answers

How to get Apollo gql codgen to work with frontend nextJS

I am using nextJS, I want my front end react queries with apollo to be typed out, but no configuration is working. I get an unknown error on my query when I use import {gql} from src/__generated__/gql and the following message when I hover over…
Wayne
  • 660
  • 6
  • 16
9
votes
2 answers

difference between @apollo/client , apollo-client and apollo boost

I am implementing using @apollo/client, but i do not see any complete example of @apollo/client with react. If i search i get example with apollo-client and apollo boost. What is the difference between all 3. I understand @apollo/client is the new…
apps
  • 313
  • 1
  • 7
  • 17
9
votes
1 answer

Apollo Client return type in Typescript

I am trying to build a simple function inside a class that returns an Apollo Client. Here is my code: import appConfig from 'config/app-config'; import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'; import LocalStorageKeys…
davidaap
  • 1,569
  • 1
  • 18
  • 43
9
votes
1 answer

Generate JavaScript empty object from TypeScript type definition, or GraphQL fragment definition

I'm using GraphQL in a project with the Apollo client, and when I use writeFragment I have to match the object shape to the fragment definition. I'm doing this manually right now, but it results in a lot of unnecessary code and makes things fragile…
user461697
1 2 3
…
99 100