relay-fns
Functions for Relay
Installation
Using npm:
$ npm install --save relay-fns
Using yarn:
$ yarn add relay-fns
Then with a module bundler like webpack, use as you would anything else:
// Using ES6 Modules;// using CommonJS modulesconst useCommitMutation = useCommitMutation;
Usage
It is required to pass down the Environment via Context on the top-level.
Why? Passing environment as a parameter to every function polludes the API.
import EnvironmentProvider from 'relay-fns';import MyApp from './MyApp'; { return <EnvironmentProvider => <MyApp /> </EnvironmentProvider> ;}
Injecting Environment
// With a hookimport useEnvironment from 'relay-fns'; { const environment = ; return // Use Environment for something ;} // With a hocimport withEnvironment from 'relay-fns'; @withEnvironmentComponent { return // this.props.environment // Use Environment for something ; }
FetchQuery
Provides FetchQuery with Environment pre-applied.
// With a hookimport useFetchQuery from 'relay-fns'; { const fetchQuery = ; ;} // With a hocimport withFetchQuery from 'relay-fns'; @withFetchQueryComponent { // Fetch some data thisprops; }
CommitMutation
Provides CommitMutation with Environment pre-applied, and returns a promise. Once the mutation is done, the promise is resolved. The promise is rejected if:
onError
is calledonCompleted
returns errors in the second argument- The response contains a key named errors - which holds a non-empty value.
// With a hookimport useCommitMutation from 'relay-fns'; { const commitMutation = ; { ; }} // With a hocimport withCommitMutation from 'relay-fns'; @withCommitMutationComponent { thisprops ; }
Create
If you create an item which resides in a list that isn't a connection, Relay is unable to put the item from the mutation payload, into your list.
To resolve the list, a config is required.
listName
The name of the list in GraphQLlistArgs
Any arguments required to resolve the listparentID
Name of the parent, which holds the list.rootField
Can be provided instead ofparentID
. Equivalent tostore.getRoot().getLinkedRecord(rootField)
payloadName
Provided, if the name of your payload, does not follow thecreatedObject
naming convention.mutationName
Provided, if the name of your mutation, does not follow thecreate[Type]
naming convention.
Assuming the query looks like this:
query MyQuery { viewer { todos { ...TodoFragment } }}
And the mutation looks like this:
mutation MyMutation($input: CreateTodoInput!) { createTodo(input: $input) { createdObject { ...TodoFragment } }}
The config would look like this:
listName: "todos" rootField: "viewer"
In practice, it could be used like this:
// With a hookimport useCreateMutation from 'relay-fns'; { const createTodo = ; { ; }} // With a hocimport withCreateMutation from 'relay-fns'; @Component { thisprops ; }
Update
If you update an item, waiting for the server to respond isn't always necessary. We may set the values on the object in the Relay Store optimistically.
If Id
is not included in your input, you will need to provide it in the config, via the dataID
property.
// With a hookimport useUpdateMutation from 'relay-fns'; { const updateTodo = ; { ; }} // With a hocimport withUpdateMutation from 'relay-fns'; @Component { thisprops ; }
Delete
When you delete an item in a list which is not a connection, the optimistic cleanup can be tedious. This function provides you with this functionality.
To resolve the list, a config is required.
dataID
Required, if theId
property does not exist in your input.listName
The name of the list in GraphQLlistArgs
Any arguments required to resolve the listparentID
Name of the parent, which holds the list.rootField
Can be provided instead ofparentID
. Equivalent tostore.getRoot().getLinkedRecord(rootField)
// With a hookimport useDeleteMutation from 'relay-fns'; { const deleteTodo = ; { ; }} // With a hocimport withDeleteMutation from 'relay-fns'; @Component { thisprops ; }
Utility HOCs
fragment
= createFragmentContainerrefetch
= createRefetchContainerpagination
= createPaginationContainer
import fragment from 'relay-fns'; @Component ... import refetch from 'relay-fns'; @Component ... import pagination from 'relay-fns'; @Component ...
Executables
relay-fns-enums
Parameters:
--schema
Path to schema.graphql--output
Output file
Add it to scripts
in package.json
Or run it from the terminal:
$ ./node_modules/.bin/relay-fns-enums --schema ./schema.graphql --output ./src/Enums.js
It will generate a file with enums from your graphql schema.
const MyEnum = Enum1: 'Enum1' Enum2: 'Enum2';
Development
-
Clone the repository
-
Install dependencies
npm|yarn install
-
Build and watch for changes
npm|yarn run watch
Credits
relay-fns is built and maintained by babangsund.