Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6208

Network request failed with react-native and graphql

$
0
0

I have a react-native app, that has a GraphQL client to get the content from my server on Heroku.

This is how my GraphQL client on the app looks like:

// API_ENDPOINT: https://my-app.herokuapp.com
const httpLink = new HttpLink({ uri: config.API_ENDPOINT });

const authLink = setContext((_, { headers }) => ({
  headers: {
    ...headers,
    'x-api-key': config.API_TOKEN,
  },
}));

const errorLink = onError(({ operation, response, graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, locations, path, code }: any) => {
      errorLog(
        `GraphQL error, operation: ${operation.operationName}, variables: ${JSON.stringify(
          operation.variables,
        )}, message: ${JSON.stringify(message)}, location: ${JSON.stringify(locations)}, path: ${JSON.stringify(
          path,
        )}, code: ${JSON.stringify(code)}`,
      );
    });
  }

  if (networkError) {
    errorLog(
      `Network error, error: ${networkError}, operation: ${operation.operationName}, variables: ${JSON.stringify(
        operation.variables,
      )}, response: ${JSON.stringify(response)}, code: ${JSON.stringify(
        get(networkError, 'statusCode'),
      )}, graphqlerrors: ${JSON.stringify(graphQLErrors)}`,
    );
  }
});

const link = ApolloLink.from([errorLink, authLink, httpLink]);
const cache = new InMemoryCache();

export const client = new ApolloClient({
  link,
  cache,
  defaultOptions: {
    query: {
      errorPolicy: 'ignore',
    },
  },
});

then to fetch the data and persist it on the user device, I use mobx-state-tree, it looks like this:

fetch: flow(function* fetch(): any {
  self.isLoading = true;

  const { data, loading } = yield client.query({
    query: QUERY,
    fetchPolicy: 'network-only',
  });

  if (!data) {
    self.isLoading = false;

    return;
  }

  try {
    self.now = NowModel.create(data);
  } catch (e) {
    errorLog(`Cannot create NowModel: ${e}, ${JSON.stringify(now)}`);
  }

  self.isLoading = loading;
}),

Alright, that was the introduction, let's talk about the problem now.

I tried the app on multiple devices, in release mode, and I didn't have any issue. I'm using Sentry to get issues reports, and I received a lot of error related to networks issues (and with other queries):

Network error, error: TypeError: Network request failed, operation: myQuery, variables: undefined, response: undefined, code: undefined, graphqlerrors: undefined

I also checked logs on the server and I don't have any issues or errors on the requests, they all respond with status 200.

Things that I'm suspecting it's that it could be related to fetchPolicy: 'network-only' or errorPolicy: 'ignore' without being sure. Could it also be that when the app goes into the background the user device, it goes into a weird state for the graphql client? or could it be that the user is trying to load data when he is not connected to the internet?

thanks in advance,


Viewing all articles
Browse latest Browse all 6208

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>