apollographql / apollographql/fullstack-tutorial

Using fragment in `launches.js` stops data from being loaded.

Open
#41 2 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.2k
Forks
808
PR merge metrics
No merged PRs in 30d

Description

Are you sure that presented fragment is correct? I mean it looks right but when changing from
```
const GET_LAUNCHES = gql`
query launchList($after: String) {
launches(after: $after) {
cursor
hasMore
launches {
id
isBooked
rocket {
id
name
}
mission {
name
missionPatch
}
}
}
}
`;
```
to solution with fragments:

```
export const LAUNCH_TILE_DATA = gql`
fragment LaunchTile on Launch {
__typename
id
isBooked
rocket {
id
name
}
mission {
name
missionPatch
}
}
`;

const GET_LAUNCHES = gql`
query GetLaunchList($after: String) {
launches(after: $after) {
cursor
hasMore
launches {
...LaunchTile
}
}
}
${LAUNCH_TILE_DATA}
`;
```

Data is never properly loaded into the component:
screenshot 2018-11-20 at 10 16 16

When using the fragments I can't see any `POST` request performed against my graphql server.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in launches.js by comparing the working inline query with the fragment-based GET_LAUNCHES query, then reproduce the missing request against the GraphQL server. Done means the fragment-based query sends a POST request and the launch data is loaded into the component.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, javascript, react
Domain
api, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.