https://github.com/quramy/apollo-link-fragment-argument

An Apollo Link to enable to parameterize fragments
https://github.com/quramy/apollo-link-fragment-argument

apollo apollo-link graphql

Last synced: 14 days ago
JSON representation

An Apollo Link to enable to parameterize fragments

• Host: GitHub
• URL: https://github.com/quramy/apollo-link-fragment-argument
• Owner: Quramy
• License: mit
• Created: 2019-12-23T10:57:56.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T03:34:13.000Z (almost 2 years ago)
• Last Synced: 2024-10-19T01:32:11.160Z (27 days ago)
• Topics: apollo, apollo-link, graphql
• Language: TypeScript
• Homepage:
• Size: 965 KB
• Stars: 41
• Watchers: 4
• Forks: 5
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# apollo-link-fragment-argument

[![npm](https://img.shields.io/npm/v/apollo-link-fragment-argument.svg?style=flat-square)](https://www.npmjs.com/package/apollo-link-fragment-argument)

![](https://github.com/Quramy/apollo-link-fragment-argument/workflows/build/badge.svg)

An Apollo Link to enable`@argumentDefinitions` and `@arguments` directives inspired from [Relay Modern's Fragment container](https://relay.dev/docs/en/fragment-container.html#passing-arguments-to-a-fragment).

## Usage

### Install

```sh

$ npm i apollo-link-fragment-argument

```

### Configure apollo client

```ts

import { ApolloClient } from "apollo-client";

import { InMemoryCache } from "apollo-cache-inmemory";

import { from } from "apollo-link";

import { createHttpLink } from "apollo-link-http";

import { createFragmentArgumentLink } from "apollo-link-fragment-argument";

function createApolloClient() {

  const cache = new InMemoryCache();

  const link = from([

    createFragmentArgumentLink(),

    createHttpLink({

      uri: "http://your.graphql.endpoint",

    }),

  ]);

  return new ApolloClient({

    cache,

    link,

  });

}

```

### Using `@argumentDefinitions` and `@arguments` directive in your query

```ts

const todoListFragment = gql`

  fragment TodoList_list on TodoList

    @argumentDefinitions(

      count: { type: "Int", defaultValue: 10 } # Optional argument

      userID: { type: "ID" } # Required argument

    ) {

    title

    todoItems(userID: $userID, first: $count) {

      # Use fragment arguments here as variables

      ...TodoItem_item

    }

  }

`;

```

```ts

const query = gql`

  query TodoListQuery($count: Int, $userID: ID) {

    ...TodoList_list @arguments(count: $count, userID: $userID) # Pass arguments here

  }

  ${todoListFragment}

`;

```

## Why?

I'm loving [GraphQL's fragments colocation](https://www.apollographql.com/docs/react/data/fragments/#colocating-fragments).

> combined with GraphQL's support for fragments, allows you to split your queries up in such a way that the various fields fetched by the queries are located right alongside the code that uses the field.

However, GraphQL syntax has no ability to parameterize Fragment (See https://github.com/graphql/graphql-spec/issues/204 if you want detail).

`@argumentDefinitions` and `@arguments` are originally introduced by Relay Modern to compose parametrized Fragments. See https://relay.dev/docs/en/fragment-container.html#composing-fragments ,

## License

MIT