CODEWITHSUNDEEP
reactjstypescriptrelay
Kirk Ross
Kirk Ross

Reputation: 7163

Converting React / Relay project to TypeScript — Parsing error on type import

I'm new to TypeScript and trying to convert a React/Relay project and I'm puzzled by a parsing error on a type import.

This is in an Environment.ts file and it's pretty copied directly from the Relay Todo example.

The Relay example uses Flow and .js extension.

// Environment.ts
import {
  Environment,
  Network,
  RecordSource,
  Store,
  Observable,
  type RequestNode, // Parsing error: ',' expected.
  type Variables,
} from 'relay-runtime';

For reference, here's the fetchQuery that uses the two type imports:

async function fetchQuery(
  operation: RequestNode, // here
  variables: Variables, // and here
): Promise<{}> {
  let headers;
  let token = localStorage.getItem('WUDDIT_JWT');
  if (token) {
    headers = {
      'Content-Type': 'application/json',
      Authorization: token ? `Bearer ${token}` : 'bearer',
    };
  } else {
    headers = {
      'Content-Type': 'application/json',
    };
  }
  return fetch('/graphql', {
    method: 'POST',
    headers: headers,
    body: JSON.stringify({
      query: operation.text,
      variables,
    }),
  })
    .then((response) => {
      return response.json();
    })
    .catch((err) => console.log('ERR', err));
}

Upvotes: 0

Views: 274

Answers (1)

lorefnon
lorefnon

Reputation: 13115

Typescript has a different syntax for type-only imports:

You can either remove the type:

// Environment.ts
import {
  Environment,
  Network,
  RecordSource,
  Store,
  Observable,
  RequestNode,
  Variables,
} from 'relay-runtime';

Or use import type in a separate import statement:

// Environment.ts
import type {
  RequestNode,
  Variables
} from 'relay-runtime';
// Environment.ts
import {
  Environment,
  Network,
  RecordSource,
  Store,
  Observable
} from 'relay-runtime';

Type only imports are useful for dead code elimination when you need only the types from some module. In this case there isn't much benefit of using type only imports.

Upvotes: 1

Related Questions