react-apollo getClient is undefined - reactjs

There appears to be an error with how I'm using react-apollo. Following the docs, I am attempting to make a basic query with Apollo. This is the error I get in the browser when on the Review page. It appears that this.getClient is undefined and unable to call watchQuery.
react-apollo.browser.umd.js:417 Uncaught TypeError: this.getClient(...).watchQuery is not a function
at GraphQL.createQuery (react-apollo.browser.umd.js:417)
at GraphQL.setInitialProps (react-apollo.browser.umd.js:404)
at GraphQL.componentWillMount (react-apollo.browser.umd.js:260)
etc...
Here is the code for the Review page. I create a Review React Component, declare a graphql-tag that calls the userInfo query, and export the graphql tag connected to the Review page below.
import React from 'react'
import { graphql } from 'react-apollo';
import gql from 'graphql-tag'
class Review extends React.Component {...}
const userInfoQuery = gql`
query userInfoQuery{
userInfo {
_id
email
name {
first
last
}
isVerified
}
}`
const ReviewWithData = graphql(userInfoQuery)(Review)
export default ReviewWithData;

The issue was I was defining the wrong client in the root index.js file. So for the code below, the client I was exporting was not actually the correct Apollo client. So the variable client on the sixth import was importing some other functions. Lesson learned! Should have been more careful!
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import { ApolloProvider } from 'react-apollo';
import App from './containers/app';
import client from './services/Apollo'
const CustomerFrontendApp = (
<ApolloProvider client={BitsyApollo.client}>
<BrowserRouter>
<App />
</BrowserRouter>
</ApolloProvider>
);
render(BitsyCustomerFrontendApp, document.getElementById('root'));

Related

Uncaught Error: useNavigate() may be used only in the context of a <Router> component in cypress unit testcases

I am trying to write "unit-test" for components in react with cypress.
Followed the link cypress docs on component testing
when I wrote testcase for a component and tried to run with "npx cypress open-ct"
then getting the above error (question title)...
Note: for login oAuth2 is implemented !!!
My index.spec.js file is
import * as React from 'react';
import { mount } from '#cypress/react';
import User from './index';
describe('User component', ()=>{
before('loginApi', ()=>{
cy.login();
//login() has login-logic and setting localStorage (placed in "commands.js" file)
//even if cy.login() is commented, error is same (so guessing this not reason of error)
})
it('Mount user', () => {
mount(<User />);
});
})
Observation1: on cypress browser under TEST BODY "mount" value is <Unknown.../>
Observation2: [Network tab] User component makes api-call and failing with 401
(#known token issue, even fails with right token)
Find attached error screenshot.
After some beating around I found out...
mount <Unknown... /> basically thrown in the case, if you have not added all the dependencies which are used in respective index.jsx file.
useNavigation() may be used only in context is thrown in the case, if you are missing BrowserRouter dependency the way you have used in your routing page (either one)
import {BrowserRouter as Router} from 'react-router-dom';
import {BrowserRouter} from 'react-router-dom';
import * as React from 'react';
import { mount } from '#cypress/react';
import User from './index';
import {BrowserRouter as Router} from 'react-router-dom';
describe('User component', ()=>{
it('Mount user', () => {
const onSubmit= cy.stub();
//or any other function which is probably used by ur component
mount(
<Router>
<User onSumbit={onSubmit}/>
</Router>
);
});
});

How to stop invisible console log in next js?

I'm using react-redux in my next js application. I'm calling the request to create a store when there is a request in my _app.js but there is some message logged in my console every time I route to a page.
This is its screenshot
I feel this is a bit annoying, I've search all over my code but I can't find what is logging here. Here is my _app.js for reference.
import Layout from '../components/Layout/Layout';
import '../styles/globals.css';
import { initializeParse } from '#parse/react-ssr';
import { Provider } from 'react-redux';
import withRedux from 'next-redux-wrapper';
import React from 'react';
import store from '../redux/store';
import App from 'next/app'
import TimeAgo from 'javascript-time-ago'
import en from 'javascript-time-ago/locale/en'
import ru from 'javascript-time-ago/locale/ru'
TimeAgo.addLocale(en)
class MyApp extends App{
static async getInitialProps({Component,ctx}){
const appProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {} ;
return {appProps: appProps};
}
render() {
const {Component,appProps} = this.props;
return(
<Provider store={store}>
<Layout>
<Component {...appProps} />
</Layout>
</Provider>
);
}
}
const makeStore = () => store;
export default withRedux(makeStore)(MyApp);
I would like find out what's going on
This was an issue with next-redux-wrapper.
Ref.:
https://github.com/kirill-konshin/next-redux-wrapper/issues/385
https://github.com/kirill-konshin/next-redux-wrapper/pull/384
It is fixed in this commit, release.
Please upgrade to v7.0.2 to resolve this problem.

How to use history.push in HOC reactjs?

I am having an axios intercept . It will catch every request . My idea is to dispatch errors commonly in the same place. So i created this intercept. If 404 error came means i will dispatch an action and redirect the page to home. But unfortunately i cant access the props.history in HOC.
Here i am sharing the code of what i have implemented:
HOC axios intercept:
import React, {useEffect} from "react";
import axios from "axios";
const checkRequests= Wrapped => {
function CheckRequests(props) {
useEffect(()=>{
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
switch (error.response.status) {
case 404 :
props.history.push('/login') // will redirect user to login page
break
default :
break
}
// Do something with response error
return Promise.reject(error);
});
})
return (
<Wrapped {...props} />
)
}
return CheckRequests
}
export default checkRequests
And wrapping this component in App.js:
import React from "react"
import CheckRequests from "./HOC/CheckRequests"
function App(props){ ... }
export default checkRequests(App)
Error:
When is console the props in HOC it comes empty
console.log(props) => {}
Please help me with that. Is there any other way to access the history.push from that HOC. For disptaching an action an action am using store.dispatch(logout()).
Wrap the withRouter HOC in the export statement like this:
export default withRouter(checkRequests);
Don't forget to import at the top of the file
import { withRouter } from "react-router";
You may use withRouter
import { withRouter } from 'react-router-dom';
export default withRouter(checkRequests);
Thanks for your answer. I added your suggestion into my code. But i got this error You should not use Route or withRouter() outside a Router . Then i found that it is outside the router so i added this
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'));
on the index.js . It works fine.

React Head Method 404

I have a React app using react-router and I need to have a route that can respond to a HEAD request for a load balancer in AWS. I've created a route /healthcheck like so <Route path="/healthcheck" component={HealthCheck}/>. The component looks like the following
import React, {Component, PropTypes} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
class HealthCheck extends Component {
render() {
return (
<h1>Healthy</h1>
);
}
}
export default HealthCheck;
This returns a 200 for a GET but a 404 for HEAD. How can I make it return a 200 for a HEAD request?
This isn't how you should do this. React is a client side library that only handles the view. You should be using your server-side logic to handle this.

Cant connect React to Graphcool backend

Im trying to get a basic React + Graphcool project setup.
Ive initialised the Graphcool backend so I can see the playground at: https://api.graph.cool/simple/v1/MY-KEY
I can run this query in the playground and see results:
query {
allGroups {
id
description
}
}
However I cant connect this to the React front-end. This is my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
// GraphQL
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
// Components
import App from './components/App/App';
const httpLink = new HttpLink({
uri: 'https://api.graph.cool/simple/v1/MY-KEY',
});
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache(),
});
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById('App'),
);
In App.js:
import React from 'react';
import gql from 'graphql-tag';
import graphql from 'react-apollo';
const myQuery = gql`
query {
allGroups {
id
description
}
}
`;
const App = () => {
return (
<div>
<h1>Application</h1>
<h2>Groups:</h2>
</div>
);
};
// export default App;
export default graphql(myQuery)(App);
But I get an error:
Uncaught TypeError: (0 , _reactApollo2.default) is not a function
I don't know if this relevant or not but my IDE gives me the following error on the 'allGroups' line in App.js:
cannot query field "allGroups" on type "Query"
thats graphql import error, lets try this
In App.js:
import { graphql, } from 'react-apollo';
you'd better using a graphcool play ground to test you query and mutation
. then connect to React.Otherwise, there are many detail to debug.
here is my procedure
graphcool deploy is ok?
go to playground schema is ok?
query and mutation is ok?
configure apollo client and connect to React component. is ok?
In the component console.log(this.props.data) is ok ?
This is my flow.
And the most thing when you add some schema and resolvser, you must be add then to graphcool.yaml files. otherwise, graphcool can't find you schema and query method.
Is this your address?
here is mine
can you see difference?

Resources