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.










share|improve this question


























    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.










    share|improve this question
























      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.










      share|improve this question













      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked yesterday









      Neill

      6237




      6237





























          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














           

          draft saved


          draft discarded


















          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






























          active

          oldest

          votes













          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes
















           

          draft saved


          draft discarded



















































           


          draft saved


          draft discarded














          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





















































          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







          Popular posts from this blog

          'app-layout' is not a known element: how to share Component with different Modules

          android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

          WPF add header to Image with URL pettitions [duplicate]