Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component doesn't re-render for hook in my React Native App #366

Closed
switz opened this issue Aug 3, 2019 · 3 comments
Closed

Component doesn't re-render for hook in my React Native App #366

switz opened this issue Aug 3, 2019 · 3 comments

Comments

@switz
Copy link

switz commented Aug 3, 2019

Here are my packages:

  "dependencies": {
    "expo": "^34.0.3",
    "graphql": "^14.4.2",
    "react": "16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-maps": "^0.25.0",
    "react-navigation": "^3.11.1",
    "urql": "^1.2.0"
  }

Setup:

const AppNavigator = createStackNavigator({
  Home: {
    screen: ShowsScreen,
    navigationOptions: () => ({
      title: 'SOTW',
    }),
  },
  ShowDetail: {
    screen: ShowDetailScreen,
  },
}, {
  initialRouteName: 'Home',
  defaultNavigationOptions: {
    headerStyle: {
      backgroundColor: 'black',
      borderBottomWidth: 0,
    },
    headerTintColor: 'white',
  },
});

const AppContainer = createAppContainer(AppNavigator);

const client = createClient({
  url: 'http://XXXXX/v1/graphql',
  fetchOptions: {
    headers: {
      'x-hasura-admin-secret': 'XXXXXX',
    },
  },
});


export default () => {
  return (
    <Provider value={client}>
      <AppContainer />
    </Provider>
  );
};

And my component render:

  const [isFoo, setFoo] = useState(false);
  const [result, executeQuery] = useQuery({
    query: `{
      event {
        id
        display_name
        door_date
        end_date
        is_recommended
        venue {
          display_name
          id
          coords
          summary
          address1
          city
          state
        }
      }
    }`,
  });

  const { data, fetching } = result;

  // without this faux-setState, the component never re-renders and fetching stays true
  useEffect(() => {
    setTimeout(() => setFoo(true), 1500);
  });

If I remove the setFoo, the component never re-renders and just hangs on fetching: true. Happy to provide any info -- I'm new to React Native, but not React so there's definitely a possibility I'm doing something wrong. But this is about as simple an example I can implement.

I looked into a few issues, such as #287 but I'm running 1.2.0 so I don't think that's the same problem.

Cheers, looking forward to using this library more. Let me know if I can share any thing else.

Could this be related -- seems like that hasn't been deployed yet? #358

@kitten
Copy link
Member

kitten commented Aug 3, 2019

Yes, the issue you’re linking to is related and has been reported by @kelset via other channels 👌

The bug should be fixed once we release the next patch version, which should go out on Monday 🙌 (there's a prerelease under the next tag for now if you need the fix urgently)

@switz
Copy link
Author

switz commented Aug 3, 2019

Okay cool, no rush on my end just wanted to let y'all know. Are there other official channels like a chatroom? I tried to find an irc channel or discord to ask first, but didn't come across one.

Thanks for the quick reply.

@switz switz closed this as completed Aug 3, 2019
@kitten
Copy link
Member

kitten commented Aug 3, 2019

@switz Hiya, no unfortunately we don't have anything set up yet but we may create a Spectrum community 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants