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
28
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 => { …
Christian Weisenburger
  • 323
  • 1
  • 3
  • 8
27
votes
7 answers

How to Formik setFieldValue in useEffect hook

I have a Formik form that needs to dynamically change based on information passed via the router. I need to run a graphQL query to retrieve some data and populate the form with that retrieved data. I am able to set up the form and retrieve the data…
Ben Riga
  • 904
  • 1
  • 9
  • 16
27
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…
Jean-Baptiste Rudant
  • 826
  • 1
  • 8
  • 14
26
votes
5 answers

Type error: JSX element type '{} | null | undefined' is not a constructor function for JSX elements

I have a React component called HandleQuery that handles the results of an Apollo GraphQL query: import React, { ReactNode } from 'react'; import { CenteredMessage } from './centered-message'; export interface HandleQueryProps { loading:…
Naresh
  • 23,937
  • 33
  • 132
  • 204
26
votes
6 answers

How to update the Redux store after Apollo GraphQL query returns

I'm fetching a list of data with the graphql HOC provided by react apollo. E.g.: const fetchList = graphql( dataListQuery, { options: ({ listId }) => ({ variables: { listId, }, }), props: ({ data: { loading,…
TheWebweiser
  • 621
  • 6
  • 10
25
votes
3 answers

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
  • 383
  • 1
  • 5
  • 10
25
votes
7 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
  • 911
  • 2
  • 11
  • 26
25
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…
saeta
  • 4,048
  • 2
  • 31
  • 48
24
votes
4 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
  • 273
  • 1
  • 2
  • 6
23
votes
2 answers

GraphQL error: Cannot query field 'mutation_name' on type 'Mutation'

I am trying to mutate a mutation. The mutation does exist and works fine on my graphql playground. but as I implement it in my react component, I get error. Queries work fine though. By the way, I need client in my code so I definitely have to use…
Anita
  • 476
  • 3
  • 10
  • 24
23
votes
2 answers

Setting state in the Query component of react-apollo

So, I'm trying to set an initial state for an edit component that gets data from the server and now should be editable in the component state. But when I try to do this: …
Andreas
  • 1,421
  • 3
  • 16
  • 32
22
votes
2 answers

How to execute query on every click using useLazyQuery()

Using useLazyQuery() hooks from @apollo/react-hooks I was able to execute a query on click of a button. But I cannot use it execute same query on consecutive clicks. export default ({ queryVariables }) => { const [sendQuery, { data, loading }] =…
arjun
  • 3,514
  • 4
  • 27
  • 48
21
votes
0 answers

Using Apollo's writeFragment to update nested list

I am working on a application in which a ship can be configured using rudders and other stuff. The database structure is sort of nested, and so far I have been keeping my GraphQL queries in correspondence with the database. That means: I could fetch…
ErikRtvl
  • 326
  • 1
  • 7
21
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
  • 507
  • 4
  • 12
21
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
  • 4,904
  • 5
  • 25
  • 26
1
2
3
…
99 100