quramy / apollo-link-fragment-argument Goto Github PK
View Code? Open in Web Editor NEWAn Apollo Link to enable to parameterize fragments
License: MIT License
An Apollo Link to enable to parameterize fragments
License: MIT License
It seems that the apollo-tooling codegen feature doesn't properly recognize "arguments" and "argumentDefinitions" directives.
.../src/navigation/authenticated/AuthenticatedContextRealTime.tsx: Unknown directive "arguments".
.../src/navigation/authenticated/AuthenticatedContextRealTime.tsx: Unknown directive "arguments".
.../src/navigation/authenticated/AuthenticatedContextRealTime.tsx: Unknown directive "argumentDefinitions".
Validation of GraphQL query document failed
at Object.validateQueryDocument (/Users/a.jacquier.bret/Documents/Git Repos/user-mobile-app/node_modules/apollo-language-server/lib/errors/validation.js:35:38)
at Object.generate [as default] (/Users/a.jacquier.bret/Documents/Git Repos/user-mobile-app/node_modules/apollo/lib/generate.js:23:18)
at write (/Users/a.jacquier.bret/Documents/Git Repos/user-mobile-app/node_modules/apollo/lib/commands/client/codegen.js:78:54)
at Task.task (/Users/a.jacquier.bret/Documents/Git Repos/user-mobile-app/node_modules/apollo/lib/commands/client/codegen.js:98:46)
✔ Loading Apollo Project
✔ Generating query files with 'typescript' target - wrote 29 files
✨ Done in 13.99s.
Generation can be done but without GraphQL document validation.
Here's my apollo client configuration :
import { ApolloClient } from 'apollo-client';
import { InMemoryCache, defaultDataIdFromObject } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { ApolloLink, split } from 'apollo-link';
import { ApolloProvider } from '@apollo/react-hooks';
import { createFragmentArgumentLink } from 'apollo-link-fragment-argument';
const AppApolloClient = new ApolloClient({
cache: new InMemoryCache({
dataIdFromObject: object => {
switch (object.__typename) {
case 'Heater':
return (object as any).serialNumber;
case 'OffPeakHours':
return null;
case 'HeatingProgramEntry':
return object.id === null ? null : defaultDataIdFromObject(object);
default:
return defaultDataIdFromObject(object);
}
},
}),
link: ApolloLink.from([
// Order matters
createFragmentArgumentLink(),
errorHandlerLink,
cleanTypenameLink,
new DebounceLink(0),
new SerializingLink(),
requestHandlerLink,
networkLink,
]),
});
export default AppApolloClient;
export const AppApolloClientProvider = ({
children,
}: {
children: ReactNode;
}) => <ApolloProvider client={AppApolloClient}>{children}</ApolloProvider>;
And my graphql fragment :
const AuthenticatedHomeRealTimeFragment = gql`
fragment AuthenticatedHomeRealTimeFragment on IndividualHome
@argumentDefinitions(
energyFrom: { type: "DateTime!" }
energyTo: { type: "DateTime!" }
) {
energyConsumption(from: $energyFrom, to: $energyTo)
`};
const AuthenticatedRealTimeQueryLiteral = gql`
query AuthenticatedRealTimeQuery(
$energyFrom: DateTime!
$energyTo: DateTime!
) {
me {
id
homes: individualHomes {
...AuthenticatedHomeRealTimeFragment
@arguments(from: $energyFrom, to: $energyTo)
}
}
}
${AuthenticatedHomeRealTimeFragment}
`;
const AuthenticatedSubscriptionsGraphQL = gql`
subscription AuthenticatedSubscriptions(
$energyFrom: DateTime!
$energyTo: DateTime!
) {
homeUpdated: individualHomeUpdated {
...AuthenticatedHomeRealTimeFragment
@arguments(from: $energyFrom, to: $energyTo)
}
}
${AuthenticatedHomeRealTimeFragment}
`;
const useAuthenticatedContextRealTimeSubscriptions = () => {
return useSubscription<
AuthenticatedSubscriptions,
AuthenticatedSubscriptionsVariables>(AuthenticatedSubscriptionsGraphQL, {
variables: {
energyFrom: '2011-10-05T14:48:00.000Z',
energyTo: '2011-11-05T14:48:00.000Z',
},
onSubscriptionData: ({ subscriptionData }) => {
//console.debug('AuthenticatedSubscriptions data', subscriptionData);
if (subscriptionData.error) {
reportError(subscriptionData.error);
}
},
});
};
Hi @Quramy .
I love this library. This is very useful.
I am using it with graphql-codegen.
define fragment
export const KCG_CARD_FRAGMENT = gql`
fragment KCGCardKnowledgeCategoryGroup on KnowledgeCategoryGroup
@argumentDefinitions(
level: { type: "EngineerLevel", defaultValue: NEWBIE }
occupation: { type: "EngineerOccupation", defaultValue: BACKEND }
) {
id
name
programmingResource {
id
name
thumbnailUrl
}
knowledgeCategories(level: $level, occupation: $occupation) {
edges {
node {
and using the fragment like this
export const CREATE_KCG_MUTATION = gql`
mutation CreateKnowledgeCategoryGroup($name: String!, $programmingResourceId: ID) {
createKnowledgeCategoryGroup(
input: { name: $name, programmingResourceId: $programmingResourceId }
) {
knowledgeCategoryGroup {
...KCGCardKnowledgeCategoryGroup
}
}
}
${KCG_CARD_FRAGMENT}
`;
Where, those arguments level
and occupation
are optional.
But graphql-codegen says
AggregateError:
GraphQLDocumentError: Variable "$level" is not defined by operation "CreateKnowledgeCategoryGroup".
Does it bug??
If it is my fault, please teach me correct definition.
node is v14.15.4
"graphql": "14.7.0",
"@graphql-codegen/add": "2.0.1",
"@graphql-codegen/cli": "1.16.3",
"@graphql-codegen/typescript": "1.16.3",
"@graphql-codegen/typescript-operations": "1.16.3",
"@graphql-codegen/typescript-react-apollo": "1.16.3",
"@graphql-codegen/fragment-matcher": "1.17.8",
"apollo-link-fragment-argument": "1.0.1",
We can't the original @argumentDefinitions
and @arguments
directive definitions.
## (A)
directive @arguments(
# There must be name(s) of arguments of this directive
) on FRAGMENT_SPREAD
However, what are the names of arguments of @arguments
? They might be named in client-side developer's source code, such as:
query MyQuery($todoCount: Int!) {
...TodosFragment @argument(count: $todoCount)
}
The problem is that the directive definition (A) can't know the directive's arguments input name is count
. In other words, The argument name of the directive should be fixed name. For example:
scalar ArgumentDefinitionSet
directive @arguments(
_defs: ArgumentDefinitionSet
) on FRAGMENT_SPREAD
The above example is absolutely valid( https://graphql.github.io/graphql-spec/June2018/#sec-Type-System.Directives ).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.