Apollo GraphQL resolvers how to pass arguments to query child type

Question

I have a Query that takes an argument with child type which also takes an argument. I would like to pass arguments on both the query and the query child type. I need help on how to implement this logic.

When I hard code the "after" variable the app works fine. How do I implement the resolver to get the after variable from the front-end and then pass is to playerInFoAPI in the dataSources?

SCHEMA

const { gql } = require("apollo-server-express");

const typeDefs = gql`
  scalar Date

  type Query {
    text: String!
    club(slug: String!): Club!
  }

  type Club {
    id: ID!
    name: String!
    pictureSecondaryUrl: String
    domesticLeague: DomesticLeague
    players(first: Int, after: String): PlayerConnection!
  }

  type PlayerConnection {
    edges: [playerEdge!]!
    nodes: [Player!]!
    pageInfo: PageInfo!
  }

  type PageInfo {
    endCursor: String
    hasNextPage: Boolean!
    hasPreviousPage: Boolean!
    startCursor: String
  }

  type Player {
    id: ID!
    displayName: String!
    slug: String!
    age: Int!
    birthDate: Date
    position: String!
    country: Country!
    subscriptionsCount: Int!
    pictureUrl: String
    shirtNumber: Int
    status: PlayerStatus!
    activeClub: Club
    allSo5Scores: So5ScoreConnection!
  }

  type playerEdge {
    cursor: String!
    node: Player
  }

  type Country {
    code: String!
  }

  type PlayerStatus {
    id: ID!
    lastFifteenSo5Appearances: Int
    lastFifteenSo5AverageScore: Float
    lastFiveSo5Appearances: Int
    lastFiveSo5AverageScore: Float
    playingStatus: String
  }

  type So5ScoreConnection {
    nodes: [So5Score!]!
  }

  type So5Score {
    score: Float
  }
  type DomesticLeague {
    id: ID!
    displayName: String!
  }
`;

module.exports = typeDefs;

GRAPHQL DATA SOURCE WITH QUERY

const { GraphQLDataSource } = require("apollo-datasource-graphql");
const { gql } = require("apollo-server-express");

const PLAYER_INFO = gql`
  query PLAYER_INFO($slug: String!, $after: String) {
    club(slug: $slug) {
      players(first: 2, after: $after) {
        pageInfo {
          endCursor
          hasNextPage
          hasPreviousPage
          startCursor
        }
        edges {
          # start node
          node {
            id
            displayName
            slug
            age
            birthDate
            position
            country {
              slug
              code
            }
            subscriptionsCount
            pictureUrl
            shirtNumber
            activeClub {
              id
              name
              pictureSecondaryUrl
              domesticLeague {
                id
                displayName
              }
            }
            status {
              id
              lastFifteenSo5Appearances
              lastFifteenSo5AverageScore
              lastFiveSo5Appearances
              lastFiveSo5AverageScore
              playingStatus
            }
            allSo5Scores {
              nodes {
                score
              }
            }
          } #end node
        }
      }
    }
  }
`;

class PlayerInfoAPI extends GraphQLDataSource {
  constructor() {
    super();
    this.baseURL = "https://api.sorare.com/graphql/";
  }

  async getPlayerInfo(slug,after) {
    try {
      const response = await this.query(PLAYER_INFO, {
        variables: {
          slug,
          after
        },
      });

      return this.playerInfoReducer(response.data.club.players);
    } catch (err) {
      console.log(err);
      throw new Error(err.message);
    }
  }

  playerInfoReducer(data) {
    return {
      players: {
        pageInfo: {
          endCursor: data.pageInfo.endCursor,
          startCursor: data.pageInfo.startCursor,
          hasNextPage: data.pageInfo.hasNextPage,
          hasPreviousPage: data.pageInfo.hasPreviousPage,
        },

        
      },
    };
  }
}

module.exports = PlayerInfoAPI;

RESOLVER

const dateScalar = require("../Utils/CustomDate");

const resolvers = {
  Date: dateScalar,

  Query: {
    text: () => "Hello There!",

    club: (_, { slug }, { dataSources }) =>
      dataSources.playerInfoAPI.getPlayerInfo(slug),
  },
  // Club: {
  //   players(_, { after }, { dataSources }) {
  //     return dataSources.playerInfoAPI.getPlayerInfo(after);
  //   },
  // },
};

module.exports = resolvers;

FRONT END WITH FETCHMORE FUNCTION

const SLUG = "slug-example";

const PlayerListTable = () => {
  const { data, loading, error, networkStatus, fetchMore } = useQuery(
    PLAYERS_INFO,
    {
      variables: { slug: SLUG, after: null },
      notifyOnNetworkStatusChange: true,
    }
  );

  const onLoadMore = () => {
    //destructure end cursor
    const { endCursor } = data.club.players.pageInfo;
    console.log(endCursor);

    fetchMore({
      variables: {
        after: endCursor,
      },

      updateQuery: (prevResult, { fetchMoreResult }) => {
        console.log(fetchMoreResult);
      },
    });
  };

Answer 1

You cannot simply forward args to child resolver as this would collide with child args if any. Also the API does not reveal args passed to parent from within a child resolver. Remember that first argument of child resolver will always be whatever is returned from parent resolver. This lets you can pass data from parent to child. This is by design to achieve separation of concerns.