Mixing
React component not being updated using Apollo Query Tag, GraphQL and AppSync
up vote
0
down vote
favorite
I have the following component for which realtime update IS WORKING.
export const UsersList = () => {
return(
<Query<ListUsersQuery, ListUsersQueryVariables>
query={gql(listUsers)} variables={{limit:100}} pollInterval={500}>
{({data, loading, subscribeToMore, refetch }) => {
console.log(data)
if (loading)
{return 'Loading'}
else
{
<OnMount onEffect={ () => {
return subscribeToMore(
buildSubscription(gql(onCreateUser), gql(listUsers))
);
}}/>
var friendlyPeople = data.listUsers.items.map(function(people){
var style = {
display:'inline-block',
margin:20,
height:300,
width: 200,
padding: 0,
backgroundColor: "#FFF",
WebkitFilter: "drop-shadow(0px, 0px, 5px,#555)",
filter: "drop-shadow(0px 0px 5px #555)"
}
return(
<div style={style} key={people.id}>
<Avatar img={people.profilePic}></Avatar>
<UserName name={people.name}></UserName>
<GetConnected></GetConnected>
</div>
)
});
return <div>{friendlyPeople}</div>
}
}
}
</Query>);
}
however, If I want to put that logic into another component likes this
export class FriendLy extends React.Component<IFriendLyProps,
IFriendLyState>{
constructor(props: IFriendLyProps){
super(props);
if( !props || !props.people) return;
var friendlyPeople = props.people.listUsers.items.map(function(people){
var style = {
display:'inline-block',
margin:20,
height:300,
width: 200,
padding: 0,
backgroundColor: "#FFF",
WebkitFilter: "drop-shadow(0px, 0px, 5px,#555)",
filter: "drop-shadow(0px 0px 5px #555)"
}
return(
<div style={style} key={people.id}>
<Avatar img={people.profilePic}></Avatar>
<UserName name={people.name}></UserName>
<GetConnected></GetConnected>
</div>
)
});
this.state = {
friendLyPeople: friendlyPeople
}
}
export const UsersList2 = () => {
return(
<Query<ListUsersQuery, ListUsersQueryVariables>
query={gql(listUsers)} variables={{limit:100}} pollInterval={500}>
{({data, loading, subscribeToMore, refetch }) => {
console.log(data)
if (loading)
{return 'Loading'}
else
{
<OnMount onEffect={ () => {
return subscribeToMore(
buildSubscription(gql(onCreateUser), gql(listUsers))
);
}}/>
return <div><FriendLy people={data}/></div>
}
}
}
</Query>);
}
It simply stop updating the GUI with the new data that is being added (Mutations still are being done). Here is the repository of the code.
- Entry Point: index.tsx
- Working Component Users.tsx
- Other Component UsersWrong.tsx
- Form CreateUserForm.tsx
Does state have something to do with this?
thanks in advance.
graphql react-apollo apollo-client aws-appsync appsync-apollo-client
asked yesterday
Neill
6237
add a comment |
up vote
0
down vote
favorite
I have the following component for which realtime update IS WORKING.
export const UsersList = () => {
return(
<Query<ListUsersQuery, ListUsersQueryVariables>
query={gql(listUsers)} variables={{limit:100}} pollInterval={500}>
{({data, loading, subscribeToMore, refetch }) => {
console.log(data)
if (loading)
{return 'Loading'}
else
{
<OnMount onEffect={ () => {
return subscribeToMore(
buildSubscription(gql(onCreateUser), gql(listUsers))
);
}}/>
var friendlyPeople = data.listUsers.items.map(function(people){
var style = {
display:'inline-block',
margin:20,
height:300,
width: 200,
padding: 0,
backgroundColor: "#FFF",
WebkitFilter: "drop-shadow(0px, 0px, 5px,#555)",
filter: "drop-shadow(0px 0px 5px #555)"
}
return(
<div style={style} key={people.id}>
<Avatar img={people.profilePic}></Avatar>
<UserName name={people.name}></UserName>
<GetConnected></GetConnected>
</div>
)
});
return <div>{friendlyPeople}</div>
}
}
}
</Query>);
}
however, If I want to put that logic into another component likes this
export class FriendLy extends React.Component<IFriendLyProps,
IFriendLyState>{
constructor(props: IFriendLyProps){
super(props);
if( !props || !props.people) return;
var friendlyPeople = props.people.listUsers.items.map(function(people){
var style = {
display:'inline-block',
margin:20,
height:300,
width: 200,
padding: 0,
backgroundColor: "#FFF",
WebkitFilter: "drop-shadow(0px, 0px, 5px,#555)",
filter: "drop-shadow(0px 0px 5px #555)"
}
return(
<div style={style} key={people.id}>
<Avatar img={people.profilePic}></Avatar>
<UserName name={people.name}></UserName>
<GetConnected></GetConnected>
</div>
)
});
this.state = {
friendLyPeople: friendlyPeople
}
}
export const UsersList2 = () => {
return(
<Query<ListUsersQuery, ListUsersQueryVariables>
query={gql(listUsers)} variables={{limit:100}} pollInterval={500}>
{({data, loading, subscribeToMore, refetch }) => {
console.log(data)
if (loading)
{return 'Loading'}
else
{
<OnMount onEffect={ () => {
return subscribeToMore(
buildSubscription(gql(onCreateUser), gql(listUsers))
);
}}/>
return <div><FriendLy people={data}/></div>
}
}
}
</Query>);
}
It simply stop updating the GUI with the new data that is being added (Mutations still are being done). Here is the repository of the code.
- Entry Point: index.tsx
- Working Component Users.tsx
- Other Component UsersWrong.tsx
- Form CreateUserForm.tsx
Does state have something to do with this?
thanks in advance.
graphql react-apollo apollo-client aws-appsync appsync-apollo-client
asked yesterday
Neill
6237
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have the following component for which realtime update IS WORKING.
export const UsersList = () => {
return(
<Query<ListUsersQuery, ListUsersQueryVariables>
query={gql(listUsers)} variables={{limit:100}} pollInterval={500}>
{({data, loading, subscribeToMore, refetch }) => {
console.log(data)
if (loading)
{return 'Loading'}
else
{
<OnMount onEffect={ () => {
return subscribeToMore(
buildSubscription(gql(onCreateUser), gql(listUsers))
);
}}/>
var friendlyPeople = data.listUsers.items.map(function(people){
var style = {
display:'inline-block',
margin:20,
height:300,
width: 200,
padding: 0,
backgroundColor: "#FFF",
WebkitFilter: "drop-shadow(0px, 0px, 5px,#555)",
filter: "drop-shadow(0px 0px 5px #555)"
}
return(
<div style={style} key={people.id}>
<Avatar img={people.profilePic}></Avatar>
<UserName name={people.name}></UserName>
<GetConnected></GetConnected>
</div>
)
});
return <div>{friendlyPeople}</div>
}
}
}
</Query>);
}
however, If I want to put that logic into another component likes this
export class FriendLy extends React.Component<IFriendLyProps,
IFriendLyState>{
constructor(props: IFriendLyProps){
super(props);
if( !props || !props.people) return;
var friendlyPeople = props.people.listUsers.items.map(function(people){
var style = {
display:'inline-block',
margin:20,
height:300,
width: 200,
padding: 0,
backgroundColor: "#FFF",
WebkitFilter: "drop-shadow(0px, 0px, 5px,#555)",
filter: "drop-shadow(0px 0px 5px #555)"
}
return(
<div style={style} key={people.id}>
<Avatar img={people.profilePic}></Avatar>
<UserName name={people.name}></UserName>
<GetConnected></GetConnected>
</div>
)
});
this.state = {
friendLyPeople: friendlyPeople
}
}
export const UsersList2 = () => {
return(
<Query<ListUsersQuery, ListUsersQueryVariables>
query={gql(listUsers)} variables={{limit:100}} pollInterval={500}>
{({data, loading, subscribeToMore, refetch }) => {
console.log(data)
if (loading)
{return 'Loading'}
else
{
<OnMount onEffect={ () => {
return subscribeToMore(
buildSubscription(gql(onCreateUser), gql(listUsers))
);
}}/>
return <div><FriendLy people={data}/></div>
}
}
}
</Query>);
}
It simply stop updating the GUI with the new data that is being added (Mutations still are being done). Here is the repository of the code.
- Entry Point: index.tsx
- Working Component Users.tsx
- Other Component UsersWrong.tsx
- Form CreateUserForm.tsx
Does state have something to do with this?
thanks in advance.
graphql react-apollo apollo-client aws-appsync appsync-apollo-client
asked yesterday
Neill
6237
I have the following component for which realtime update IS WORKING.
export const UsersList = () => {
return(
<Query<ListUsersQuery, ListUsersQueryVariables>
query={gql(listUsers)} variables={{limit:100}} pollInterval={500}>
{({data, loading, subscribeToMore, refetch }) => {
console.log(data)
if (loading)
{return 'Loading'}
else
{
<OnMount onEffect={ () => {
return subscribeToMore(
buildSubscription(gql(onCreateUser), gql(listUsers))
);
}}/>
var friendlyPeople = data.listUsers.items.map(function(people){
var style = {
display:'inline-block',
margin:20,
height:300,
width: 200,
padding: 0,
backgroundColor: "#FFF",
WebkitFilter: "drop-shadow(0px, 0px, 5px,#555)",
filter: "drop-shadow(0px 0px 5px #555)"
}
return(
<div style={style} key={people.id}>
<Avatar img={people.profilePic}></Avatar>
<UserName name={people.name}></UserName>
<GetConnected></GetConnected>
</div>
)
});
return <div>{friendlyPeople}</div>
}
}
}
</Query>);
}
however, If I want to put that logic into another component likes this
export class FriendLy extends React.Component<IFriendLyProps,
IFriendLyState>{
constructor(props: IFriendLyProps){
super(props);
if( !props || !props.people) return;
var friendlyPeople = props.people.listUsers.items.map(function(people){
var style = {
display:'inline-block',
margin:20,
height:300,
width: 200,
padding: 0,
backgroundColor: "#FFF",
WebkitFilter: "drop-shadow(0px, 0px, 5px,#555)",
filter: "drop-shadow(0px 0px 5px #555)"
}
return(
<div style={style} key={people.id}>
<Avatar img={people.profilePic}></Avatar>
<UserName name={people.name}></UserName>
<GetConnected></GetConnected>
</div>
)
});
this.state = {
friendLyPeople: friendlyPeople
}
}
export const UsersList2 = () => {
return(
<Query<ListUsersQuery, ListUsersQueryVariables>
query={gql(listUsers)} variables={{limit:100}} pollInterval={500}>
{({data, loading, subscribeToMore, refetch }) => {
console.log(data)
if (loading)
{return 'Loading'}
else
{
<OnMount onEffect={ () => {
return subscribeToMore(
buildSubscription(gql(onCreateUser), gql(listUsers))
);
}}/>
return <div><FriendLy people={data}/></div>
}
}
}
</Query>);
}
It simply stop updating the GUI with the new data that is being added (Mutations still are being done). Here is the repository of the code.
- Entry Point: index.tsx
- Working Component Users.tsx
- Other Component UsersWrong.tsx
- Form CreateUserForm.tsx
Does state have something to do with this?
thanks in advance.
graphql react-apollo apollo-client aws-appsync appsync-apollo-client
graphql react-apollo apollo-client aws-appsync appsync-apollo-client
asked yesterday
Neill
6237
asked yesterday
Neill
6237
asked yesterday
Neill
6237
asked yesterday
Neill
6237
asked yesterday
Neill
6237
6237
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372455%2freact-component-not-being-updated-using-apollo-query-tag-graphql-and-appsync%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
