I tried to run a program, but I got this warning message: Line 75:8: React Hook useEffect has missing dependencies: 'client' and 'loading'. Either include them or remove the dependency array react-hooks/exhaustive-deps
This is my Code
const UserList = ({ setSelectedUsers }) => {
const { client } = useChatContext();
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(false);
const [listEmpty, setListEmpty] = useState(false);
const [error, setError] = useState(false);
useEffect(() => {
const getUsers = async () => {
if(loading) return;
setLoading(true);
try {
const response = await client.queryUsers(
{ id: { $ne: client.userID } },
{ id: 1 },
{ limit: 8 }
);
if(response.users.length) {
setUsers(response.users);
} else {
setListEmpty(true);
}
} catch (error) {
setError(true);
}
setLoading(false);
}
if(client) getUsers()
}, []);
You can get rid of the warning by // eslint-disable-next-line react-hooks/exhaustive-deps above the useEffect dependency. useEffect sometimes suggests useless dependencies that should not be actually added in dependency array
useEffect(() => {
const getUsers = async () => {
if(loading) return;
setLoading(true);
try {
const response = await client.queryUsers(
{ id: { $ne: client.userID } },
{ id: 1 },
{ limit: 8 }
);
if(response.users.length) {
setUsers(response.users);
} else {
setListEmpty(true);
}
} catch (error) {
setError(true);
}
setLoading(false);
}
if(client) getUsers()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);```
Related
ProfilePic.js
Due to useeffect on each component rendering API call happen.
How to solve this issue?
useEffect(() => {
dispatch(getImages())
}, [dispatch])
The API call is happening in ProfilePicSlice.js file below:
or how to add if condition in if condition, refer below code
ProfilePicSlice.js
import { createSlice, createAsyncThunk } from '#reduxjs/toolkit'
import { IMAGE_API, ACCESS_KEY } from "../../app/utils/constant";
export const getImages = createAsyncThunk('imageList/images',
(_, { getState }) => {
const store = getState();
const topic = store.users[0].topic;
const otherTopic = store.users[0].otherTopic;
if(store === null){
console.log('api call')
}else{
console.log('no api call')
}
if(topic === 'Other'){
return fetch(`${IMAGE_API}${otherTopic}${ACCESS_KEY}`)
.then((res) => res.json());
}else{
return fetch(`${IMAGE_API}${topic}${ACCESS_KEY}`)
.then((res) => res.json());
}
})
const ProfilePicSlice = createSlice({
name: 'imageList',
initialState: {
images: [],
selectedImage: {},
loading: false,
},
extraReducers: (builder) => {
builder.addCase(getImages.fulfilled, (state, action) => {
state.loading = false;
state.images.push(action.payload);
console.log(action.payload)
})
},
reducers: {
selectedImage: (state, action) => {
state.selectedImage = action.payload;
},
removeImage: (state, action) => {
const itemId = action.payload;
state.images = state.images.filter((item) => item.id !== itemId);
}
},
});
export const { selectedImage, removeImage } = ProfilePicSlice.actions
export default ProfilePicSlice.reducer
I have tried to resolve this network errors but it has no possible and I do not know what is causing this. This is my apollo server index:
const mongoose = require('mongoose')
const {ObjectId} = require('mongodb')
const { createServer } = require('http')
const { execute, subscribe } = require('graphql')
const { SubscriptionServer } = require('subscriptions-transport-ws')
const { makeExecutableSchema } = require ('#graphql-tools/schema')
const express = require('express')
const { ApolloServer } = require('apollo-server-express')
const {resolvers,typeDefs} = require('./graphql')
const jwt = require('jsonwebtoken')
const {onConnect,onDisconnect} = require('./controllers/User')
require('dotenv').config()
const graphqlUploadExpress = require('graphql-upload/graphqlUploadExpress.js')
const { EventEmitter } = require('events')
const { PubSub } =require('graphql-subscriptions')
const { RedisPubSub } =require('graphql-redis-subscriptions')
const Redis = require('ioredis')
const
{
ApolloServerPluginDrainHttpServer,
ApolloServerPluginLandingPageGraphQLPlayground,
ApolloServerPluginLandingPageLocalDefault
} = require('apollo-server-core')
const { WebSocketServer} = require('ws')
const {useServer } = require('graphql-ws/lib/use/ws')
const path = require('path')
const bodyParser = require('body-parser')
const biggerEventEmitter = new EventEmitter();
biggerEventEmitter.setMaxListeners(0);
const options = {
host: process.env.REDIS_DOMAIN_NAME,
port: process.env.PORT_NUMBER,
password:process.env.REDIS_PASSWORD,
retryStrategy: times => {
// reconnect after
return Math.min(times * 50, 2000);
}
};
const pubsub = process.env.NODE_ENV === 'development' ? new PubSub({eventEmitter: biggerEventEmitter}) : new RedisPubSub({
publisher: new Redis(options),
subscriber: new Redis(options)
});
mongoose.connect(process.env.BBDD,
{},(err,_)=>
{
if(err)
{
console.log("Error de conexion")
}
else
{
console.log("Conexion Base de datos Correcta")
server()
}
})
async function server()
{
const app = express()
const httpServer = createServer(app)
const schema = makeExecutableSchema({ typeDefs, resolvers })
const PORT = process.env.APP_PORT
const getDynamicContext = async (ctx, msg, args) => {
if (ctx.connectionParams.authToken) {
const user = jwt.verify(ctx.connectionParams.authToken.replace("Bearer ", ""),process.env.KEY);
return { user, pubsub};
}
return { user: null };
};
const wsServer = new WebSocketServer(
{
server: httpServer,
path: '/graphql'
})
const serverCleanup = useServer({
schema,
context: (ctx, msg, args) => {
return getDynamicContext(ctx, msg, args)
},
onConnect: async (ctx) => {
console.log('onConnect');
let connectionParams = ctx.connectionParams
try
{
if (connectionParams.authToken)
{
const user = jwt.verify(connectionParams.authToken.replace("Bearer ", ""),process.env.KEY)
await onConnect(user.id,pubsub)
return { user , pubsub}
}
}
catch(error)
{
throw new Error('Missing auth token!')
}
},
async onDisconnect(context)
{
console.log('onDisconnect');
try
{
if(context.connectionParams&&context.connectionParams.authToken)
{
const user = jwt.verify(context.connectionParams.authToken.replace("Bearer ", ""),process.env.KEY)
await onDisconnect(user.id,pubsub)
}
}
catch(error)
{
/* throw new Error('Missing context!') */
}
}, }, wsServer)
const server = new ApolloServer(
{
schema,
persistedQueries:false,
context: async ({ req ,connection }) =>
{
let authorization = req.headers.authorization
try
{
if(authorization)
{
user = jwt.verify(authorization.replace("Bearer ", ""),process.env.KEY)
return{
user,
pubsub
}
}
}
catch (error)
{
throw new Error("Token invalido");
}
},
csrfPrevention: true,
cache: 'bounded',
plugins: [ApolloServerPluginDrainHttpServer({ httpServer }),
ApolloServerPluginLandingPageLocalDefault({ embed: true }),
{
async serverWillStart() {
return {
async drainServer() {
await serverCleanup.dispose();
},
};
},
}]
})
app.use(graphqlUploadExpress())
await server.start()
server.applyMiddleware({ app })
httpServer.listen(process.env.PORT||4000, () => {
console.log(
`Server is now running on http://localhost:${process.env.PORT||4000}${server.graphqlPath}`,
);
});
}
And this is my apollo client config:
import {ApolloClient,createHttpLink,defaultDataIdFromObject,InMemoryCache,split} from '#apollo/client'
import {WebSocketLink} from '#apollo/client/link/ws'
import { getMainDefinition } from '#apollo/client/utilities'
import { setContext } from "apollo-link-context"
import {createUploadLink} from 'apollo-upload-client'
import {getToken, getUpdatedTokenApi} from '../utils/auth'
import { GraphQLWsLink } from '#apollo/client/link/subscriptions';
import { createClient } from 'graphql-ws';
import { from, HttpLink } from '#apollo/client';
import { RetryLink } from '#apollo/client/link/retry';
import { disableFragmentWarnings } from 'graphql-tag';
disableFragmentWarnings()
const type = () =>
{
if(window.location.pathname.startsWith(`/${process.env.ADMIN_DEV}`))
{
return 'admin'
}
else
{
return null
}
}
const link = (e)=>
{
switch (e) {
case 1:
return 'https://unglo.herokuapp.com/graphql'
case 2:
return 'http://localhost:4000/graphql'
default:
break;
}
}
const ws_Link = (e)=>
{
switch (e) {
case 1:
return 'wss://unglo.herokuapp.com/graphql'
case 2:
return 'ws://localhost:4000/graphql'
default:
break;
}
}
import { onError } from "#apollo/client/link/error";
// Log any GraphQL errors or network error that occurred
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
graphQLErrors.forEach(({ message, locations, path }) =>
console.log(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
)
);
if (networkError) console.log(`[Network error]: ${networkError}`);
});
const token = getToken(type())
const updatedToken = getUpdatedTokenApi()
const httpLink = new createUploadLink({
uri: link(2),
headers: {
'Apollo-Require-Preflight': 'true',
},
});
const wsLink = new GraphQLWsLink(createClient(
{
url: ws_Link(2),
connectionParams:
{
authToken: token ? `Bearer ${token}` : updatedToken ? `Bearer ${updatedToken}` : "",
},
lazy:true,
}
))
const splitLink = split(
({ query }) => {
const definition = getMainDefinition(query);
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
);
},
wsLink,
httpLink,
errorLink
);
const authMiddleware = setContext((_, { headers }) =>
{
return {
headers:
{
...headers,
Authorization: token ? `Bearer ${token}` :updatedToken ? `Bearer ${updatedToken}` : "",
},
}
})
const client = new ApolloClient
({
ssrMode: true,
connectToDevTools:true,
cache: new InMemoryCache({
}),
link:authMiddleware.concat(splitLink),
})
export default client
And these are errors:
I have tried removing all apollo cliente queries and errors persists and google console dont show error details
Please if any body know about this kind of errors it shoud be helpfull
I would like to add a progress indicator to Tesseract.js logging.
The example in docs works just fine, until setting a state hook into logger:
const worker = createWorker({
logger: (m) => {
setProgress(m) //new
}});
...
const [ocr, setOcr] = useState('Recognizing...');
const [progress, setProgress] = useState(null); //new
...
return (
<div className="App">
<p>
<LogComponent progress={progress}/> //new
</p>
</div>);
This causes the browser to slow down significantly (probably due React's way to re-render on each state update). Is there a way to get around this? Using React.memo perhaps?
You could design it into a hook so your entire component doesn't re-render. Here is a useTesseract hook you can use that I created: https://gist.github.com/KevinDanikowski/25cdcdda2ef4750bcf443f2027cc375a
Copy and Pasted:
import { useState, useEffect } from 'react'
import { createWorker } from 'tesseract.js'
export default function useTesseract({ tesseractLanguage = 'eng', log = false }) {
const [tesseractWorker, setTesseractWorker] = useState(null)
const [loadingModel, setLoadingModel] = useState(true)
const [modelError, setModelError] = useState(false)
const [imgResults, setImgResults] = useState({})
const [processing, setProcessing] = useState(false)
const [progress, setProgress] = useState(0)
const extractTextFromImage = (imageUrl) => {
const recognize = async () => {
const {
data: {
hocr: htmlOutput,
text,
// tsv, box, unlv
},
} = await tesseractWorker.recognize(imageUrl)
setProcessing(false)
setImgResults({ html: htmlOutput, text })
}
if (loadingModel) {
try {
setTimeout(recognize, 400)
} catch (e) {
console.error('Timeout Error:', e.message)
setImgResults({ error: true })
}
} else {
try {
setProcessing(true)
recognize()
} catch (e) {
console.error('Tesseract Error:', e.message)
setProcessing(false)
setImgResults({ error: true })
}
}
}
const logger = (m) => {
setProgress(m.progress)
if (log) {
console.info(m)
}
}
useEffect(() => {
const loadTesseract = async () => {
if (tesseractWorker) {
await tesseractWorker.loadLanguage(tesseractLanguage)
await tesseractWorker.initialize(tesseractLanguage)
console.info(`INFO: loaded ${tesseractLanguage} tesseract model`)
} else {
const tesseractWorker = createWorker({
logger,
// specify paths because sometimes the free CDN goes down
// corePath: '/static/tesseract-core.wasm.2.2.0.js',
// workerPath: '/static/tesseract-worker.v2.1.4.min.js',
})
setTesseractWorker(tesseractWorker)
await tesseractWorker.load()
await tesseractWorker.loadLanguage(tesseractLanguage)
await tesseractWorker.initialize(tesseractLanguage)
console.info(`INFO: loaded ${tesseractLanguage} tesseract model`)
setLoadingModel(false)
setModelError(true)
setLoadingModel(false)
}
}
loadTesseract().catch((e) => {
console.error(`ERROR: Failed to load tesseract model`, e.message)
setModelError(true)
setLoadingModel(false)
})
// TODO: Have to add a ref to reference the latest tesseractWorker in order to terminate
// return () => tesseractWorker.terminate()
}, [tesseractLanguage])
return {
imgResults,
loadingModel,
processing,
modelError,
progress,
extractTextFromImage,
}
}
I managed to implement and render the progress of the tesseract worker by putting my application render inside a class and using the setState method:
class App extends React.Component {
constructor(props){
super(props)
this.state = {
file: null
}
this.handleChange = this.handleChange.bind(this)
}
setProgress(m) {
if (m.progress !== 0 && m.progress !== 0.5 && m.progress !== 1){
var prog = "Progress: " + Math.round(m.progress*100) + "%"
this.setState({progress: prog})
}
}
worker = createWorker({
logger: m => this.setProgress(m),
});
doOCR = async () => {
await this.worker.load();
await this.worker.loadLanguage('eng');
await this.worker.initialize('eng');
const { data: { text } } = await this.worker.recognize(this.state.file);
this.setState({text: extractTotal(text),
progress: ""});
};
handleChange(event) {
this.setState({text: placeholder});
this.setState({
file: URL.createObjectURL(event.target.files[0]),
})
this.doOCR()
}
setText(input){
if (!input) {
return "Please select a receipt"
}
else {
return input
}
}
render() {
console.log("Text: " + this.state.text)
return (
<div className="container">
<p>{this.setText(this.state.text)}</p>
<p>{this.state.progress}</p>
<input type="file" onChange={this.handleChange}/>
<img src={this.state.file} className='logo' alt=""/>
</div>
);
}
}
I'm trying to call apiAction in constructor method through the dispatch redux method in ReactJS Component:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import './styles.scss'
import { fetchData, testSet } from '../../../../../event/src/cg-store/actions';
class AppDetails extends Component {
constructor(props) {
super(props);
this.state ={
testowaZmienna: ''
}
this.props.fetchData('5576900');
}
componentDidMount() {
document.addEventListener('click', () => {
this.props.addCount()
});
this.props.testSet()
this.props.fetchData('5576900');
console.log('dhsadhnaskjndaslndsadl-----------------------------------------')
}
render() {
const { error, test, count, testSetData, data } = this.props;
return (
<div>
TEST--------------------------
Count: {count}
Error: {error}
Test: {test}
TestSet: {testSetData}
Fetch: {data[0]}
</div>
);
}
}
const mapStateToProps = (state) => {
return {
count: state.count,
test: state.cg.test,
data: state.cg.data,
error: state.cg.error,
testSetData: state.cg.testSet,
};
};
const mapDispatchToProps = (dispatch) => {
return {
fetchData: (offerId) => dispatch(fetchData(offerId)),
addCount: () => dispatch({
type: 'ADD_COUNT'
}),
testSet: () => dispatch(testSet()),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(AppDetails);
As you can see there is addCount, testSet and fetchData methods. addCount and testSet works but problem is with fetchData:
This is apiAction method:
const fetchProductsPending = () => {
return {
type: actionTypes.FETCH_DATA_PENDING
};
};
const fetchProductsSuccess = fetchedData => {
return {
type: actionTypes.FETCH_DATA_SUCCESS,
data: fetchedData
};
};
const fetchProductsError = errorMessage => {
return {
type: actionTypes.FETCH_DATA_ERROR,
error: errorMessage
};
};
export const testSet = () => {
return {
type: actionTypes.TEST_SET
};
};
export const fetchData = (offerId) => (dispatch) => {
console.log('Im inside fetch before set pending'); // It does not want to go here
dispatch(fetchProductsPending());
axios
.get(config.api.host + offerId, {
headers: {
"Content-Type": "application/json",
}
})
.then(response => {
return response.data;
})
.then(response => {
dispatch(fetchProductsSuccess(response.data));
console.log("Fetch data success: ----------------------");
console.log(response.data);
})
.catch(error => {
dispatch(fetchProductsError(error.statusText));
console.log("Fetch data success: ----------------------");
console.log(error);
});
};
So as you can see testSet works fine but fetchData does not want to work.
What I'm doing wrong?
I have written integration tests for graphql-js subscriptions, which are showing weird behavior.
My graphq-js subscription works perfectly in GraphiQL. But when the same subscriptions is called from unit test, it fails.
Ggraphql-Js object, with resolve function and subscribe function
return {
type: outputType,
args: {
input: {type: new GraphQLNonNull(inputType)},
},
resolve(payload, args, context, info) {
const clientSubscriptionId = (payload) ? payload.subscriptionId : null;
const object = (payload) ? payload.object : null;
var where = null;
var type = null;
var target = null;
if (object) {
where = (payload) ? payload.object.where : null;
type = (payload) ? payload.object.type : null;
target = (payload) ? payload.object.target : null;
}
return Promise.resolve(subscribeAndGetPayload(payload, args, context, info))
.then(payload => ({
clientSubscriptionId, where, type, target, object: payload.data,
}));
},
subscribe: withFilter(
() => pubSub.asyncIterator(modelName),
(payload, variables, context, info) => {
const subscriptionPayload = {
clientSubscriptionId: variables.input.clientSubscriptionId,
remove: variables.input.remove,
create: variables.input.create,
update: variables.input.update,
opts: variables.input.options,
};
subscriptionPayload.model = model;
try {
pubSub.subscribe(info.fieldName, null, subscriptionPayload);
} catch (ex) {
console.log(ex);
}
return true;
}
),
};
Subscription query
subscription {
Customer(input: {create: true, clientSubscriptionId: 112}) {
customer {
id
name
age
}
}
}
Mutation query
mutation {
Customer {
CustomerCreate (input:{data:{name:"Atif 50", age:50}}) {
obj {
id
name
}
}
}
}
Integration Test
'use strict';
const ws = require('ws');
const { SubscriptionClient } = require('subscriptions-transport-ws');
const { ApolloClient } = require('apollo-client');
const { HttpLink } = require('apollo-link-http');
const { InMemoryCache } = require('apollo-cache-inmemory');
const Promise = require('bluebird');
const expect = require('chai').expect;
const chai = require('chai').use(require('chai-http'));
const server = require('../server/server');
const gql = require('graphql-tag');
let apollo;
let networkInterface;
const GRAPHQL_ENDPOINT = 'ws://localhost:5000/subscriptions';
describe('Subscription', () => {
before(async () => {
networkInterface = new SubscriptionClient(
GRAPHQL_ENDPOINT, { reconnect: true }, ws);
apollo = new ApolloClient({
networkInterface ,
link: new HttpLink({ uri: 'http://localhost:3000/graphql' }),
cache: new InMemoryCache()
});
});
after(done => {
networkInterface.close() ;
});
it('subscription', async () => {
const client = () => apollo;
// SUBSCRIBE and make a promise
const subscriptionPromise = new Promise((resolve, reject) => {
client().subscribe({
query: gql`
subscription {
Customer(input: {create: true,
clientSubscriptionId: 112,
options: {where: {age: 50}}}) {
customer {
name
}
}
}
`
}).subscribe({
next: resolve,
error: reject
});
});
let execGraphQL;
// MUTATE
await execGraphQL(
`mutation {
Customer {
CustomerCreate (input:{data:{name:"Atif 21", age:50}}) {
obj {
id
name
}
}
}
}`
);
// ASSERT SUBSCRIPTION RECEIVED EVENT
expect(await subscriptionPromise).to.deep.equal({});
});
});
Issue Here
When test in run, payload in the resolve function contains global data, where as it should contain the subscription payload. So the code breaks.